Responsive SVG-Pfad mit SnapSVG

Ist es möglich, eine ansprechende path mit SnapSVG?

Ich gebaut habe, die folgenden experiment auf CodePen, jeden, den ich will meine path zu reagieren.

Baue ich meinen Pfad mit dem folgenden code auf Linie 9 meiner Feder:

var myPathC = snapC.path("M62.9 14.9c-25-7.74-56.6 4.8-60...

Aber es ist dieser Weg, den ich Wünsche zu reagieren oder neu gezeichnet, wenn das Browserfenster skaliert wird. Wer weiß, ob dies möglich ist und/oder irgendwelche Ideen auf wie zu nähern?

InformationsquelleAutor Matt | 2014-01-06
  1. 9

    Geben Sie dem container eine viewBox-Attribut, z.B.

    <svg id="svgC" width="100%" height="100%" viewBox="0 0 600 400"></svg>

    und es wird die Größe des Fensters.

    • sollte ich bei dieser Suche: snapsvg.io/docs/#Snap.Pfad.getBBox ? Ich bin ja nicht so der JS freak, so kämpfen, um viel Sinn zu machen von der Snap-Dokumentation. Vielen Dank für die Antwort, auch!
    • könnten Sie getBBox anwenden einer Transformation auf den Weg. Es würde dazu führen, dass eine kompliziertere Lösung wenn.
    • schön, ich habe aktualisiert die CodePen-Beispiel in Frage und ich habe es zu arbeiten. viewBox ist ein wenig verwirrend, aber ich habe es geschafft zu erreichen was ich brauche. Ich Spiel mit viewBox ein bisschen mehr, um es besser verstehen, denke ich!
    • Dieser eine hat mir sehr geholfen
    InformationsquelleAutor Robert Longson
  2. 0

    Habe ich eine funktionierende svg, die als Reaktion nach dem viewport Vorschlag.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <style>
        .shapeDemo {
            min-height: 200px;
            width: 100%;
        }

        svg .purpleCircle {
            fill: darkmagenta;
            stroke: black;
            stroke-width:5;
        }

        svg .greenRectangle {
            fill: green;
            stroke: black;
            stroke-width: 5;
        }

        svg .redRectangle {
            fill: red;
            stroke: black;
            stroke-width: 5;
        }
    </style>
</head>
<body>
    <p>Responsive SVG sandbox</p>
    <svg class="shapeDemo" viewBox="0 0 600 400"> 
        <circle cx="75%" cy="10%" r="2.5%" class="purpleCircle"/>
        <circle cx="25%" cy="10%" r="1%" class="purpleCircle"/>
        <circle cx="50%" cy="22%" r="5%" class="purpleCircle"/>

        <rect x="20%" y="30%" width="10%" height="5%" class="redRectangle" />

        <rect x="45%" y="55%" width="10%" height="5%" rx="10" ry="10"
                    class="greenRectangle" />

        <ellipse cx="80%" cy="70%" rx="10%" ry="5%" />

        <polygon points="100,0 50,50 150,50"/>
    </svg>
</body>
</html>
    InformationsquelleAutor Jason Pease
Schreibe einen Kommentar