Wie erstelle ich coole dynamische Symbole mit SVG (Codebeispiel)

In diesem Kapitel erfahren Sie, wie Sie mit SVG coole dynamische Symbole in HTML5 erstellen. Ich hoffe, dass es für Sie hilfreich ist.

1. Grundlegende grafische Elemente

SVG hat einige vordefinierte Formelemente: Rechteck 77ad1583b54047b74ea3c92831d04650, Kreis ef0d92ece4f7395984a4d302453861fa, gerade Linied0201a3a8c979f08e74967dec20588b2, Polyliniec3a67d7f209b7197095528562338c403, Polygone785e40170d80ec0833f2f6ee57351dc, Pfad8f08b0b4384c46cfaf134ef7016330f0 und Text7afbc23223af17d69e2ad2a4e42c6248.

<!-- viewBox定义画布大小 width/height定义实际大小 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" viewBox="0 0 300 300">

    <!-- 直线 (x1,y1)与(x2,y2)为两点坐标 -->
    <line x1="0" y1="0" x2="250" y2="30" />

    <!-- 多边形 通过多个点的坐标形成封闭图形 -->
    <polygon points="5,5 100,100 50,200" />

    <!-- 矩形 (x,y)为左上角起始点 -->
    <rect x="100" y="100" width="120" height="100" />

    <!-- 圆形 (cx,cy)圆心点 r半径 -->
    <circle cx="100" cy="50" r="40" stroke="black"/>

    <!-- 文本 (x,y)左下角坐标  -->
    <text x="0" y="20" style="font-size:16px;font-weight: bold">Try SVG</text>

</svg>

2. Stil und Wirkung

Der Stil des SVG-Elements kann als Attribut des Tags geschrieben werden oder auch mit Stil geschrieben. Hier sind einige Hauptstilattribute:

Strich: Strichfarbe
Strichbreite: Strichbreite
Strichopazität: Transparenz des Strichs
Füllung: Füllfarbe, also Hintergrund
Fill-Opacity: Transparenz der Füllfarbe
Transformieren: Grafiktransformation, ähnlich der CSS3-Transformation

svg unterstützt auch viele Filtereffekte, einschließlich Farbverläufe, Schatten, Unschärfen, Bildmischung usw. Sie müssen nicht so viel wissen. Wenn Sie beispielsweise ein paar farbige Kreise zeichnen möchten, verwenden Sie einfach Kreis und Füllung.

Hinweis: Bei der Transformation wird standardmäßig die obere linke Ecke von SVG als Basispunkt verwendet, nicht der Mittelpunkt des Kreises oder ein anderer Mittelpunkt. Die obere linke Ecke ist der Ursprung des SVG-Koordinatensystems. Um das Transformations- und Koordinatensystem zu verstehen, können Sie hier nachlesen.

3. Hilfselemente

SVG hat mehrere Hilfselemente: 3e85b886453624fdb0fdf16e0b451ee0 5aaf33f5e4c7c54d016a539db37ebcc8 . Sie stellen keine spezifischen Formen dar, sondern helfen bei der Gruppenverwaltung, Wiederverwendung usw. von grafischen Elementen. Eine ausführliche Einführung finden Sie hier.

3e85b886453624fdb0fdf16e0b451ee0-Elemente werden normalerweise verwendet, um zusammengehörige Grafikelemente für einheitliche Vorgänge zu gruppieren, z. B. zum Drehen, Skalieren oder Hinzufügen verwandter Stile.
2199a63ce40299beb55b2a8b469dfcd6 Ermöglicht die Wiederverwendung vorhandener SVG-Grafiken. Sie können ein einzelnes SVG-Grafikelement oder ein durch 3e85b886453624fdb0fdf16e0b451ee09f9d05a576cea0d265e9d798da82bdec definiertes Gruppenelement wiederverwenden.
9f9d05a576cea0d265e9d798da82bdec Intern definierte Elemente werden nicht direkt angezeigt. Sie müssen den Stil nicht im Voraus definieren, sondern definieren ihn beim Instanziieren mit 2199a63ce40299beb55b2a8b469dfcd6.
5aaf33f5e4c7c54d016a539db37ebcc8 kann ein eigenes Fenster erstellen, das die Gruppierungsfunktion von 3e85b886453624fdb0fdf16e0b451ee0 und die anfängliche unsichtbare Funktion von 9f9d05a576cea0d265e9d798da82bdec hat.

Für das oben erwähnte Transformations-Basispunktproblem können Sie den Basispunkt zurücksetzen, indem Sie das 3e85b886453624fdb0fdf16e0b451ee0-Tag verschachteln und die Position von 3e85b886453624fdb0fdf16e0b451ee0 versetzen. Zeichnen Sie wie folgt mehrere horizontal angeordnete Kreise und stellen Sie unterschiedliche Zoomgrößen ein

<svg width="80px" height="80px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
    <g transform="translate(20 50)">
        <circle cx="0" cy="0" r="7" fill="#e15b64" transform="scale(0.99275 0.99275)" />
    </g>
    <g transform="translate(40 50)">
        <circle cx="0" cy="0" r="7" fill="#f47e60" transform="scale(0.773605 0.773605)" />
    </g>
    <g transform="translate(60 50)">
        <circle cx="0" cy="0" r="7" fill="#f8b26a" transform="scale(0.42525 0.42525)" />
    </g>
    <g transform="translate(80 50)">
        <circle cx="0" cy="0" r="7" fill="#abbd81" transform="scale(0.113418 0.113418)" />
    </g>
</svg>

4. Implementierung der Animation

Animationseffekt von SVG Es ist implementiert basierend auf dem Animations-Tag-Element:

　95b9bf201d21a40abe523e82bfc3ece7 realisiert den Übergangseffekt eines einzelnen Attributs;
​​b32227fb1e5c965892584259ad65af80Transformationsanimationseffekt realisieren;
​​1c3f862fe048da235fb9de11bfd05e0dErzielen Sie Pfadanimationseffekte.

Die Schreibmethode von SVG ist sehr flexibel. Der Stil kann als Tag-Attribut oder im Stil geschrieben werden. Das Animations-Tag kann über xlink angegeben oder in das Animationselement geschrieben werden. Im Folgenden wird die xlink-Schreibmethode von animateTransform demonstriert:

<svg xmlns="http://www.w3.org/2000/svg">
    <rect id="animateObject" x="20" y="20" width="50" height="50" fill="blue"></rect>
    <animateTransform
        xlink:href="#animateObject" <!-- 指定动画元素 -->
        attributeName="transform"  <!-- 需要动画的属性名称 -->
        type="scale"  <!-- 指定transform属性 -->
        begin="0s"    <!-- 开始时间，即延迟 -->
        dur="3s"      <!-- 动画时间 -->
        from="1"      <!-- 开始值 -->
        to="2"        <!-- 结束值 -->
        repeatCount="indefinite"   <!-- 重复方式，indefinite无限重复  -->
    />
</svg>

Die Animation im obigen Beispiel ist der Übergang von A nach B. Um einen reibungslosen Zyklus zu bilden, müssen mindestens drei Schlüsselpunkte definiert werden. animateTransform unterstützt flexiblere Attributeinstellungen:

Werte: Werte mehrerer Schlüsselpunkte, die von und nach ersetzen, z. B. Werte="0;1;0"

keyTimes: gefolgt von Werten Dementsprechend sind die Zeitpunkte jedes Punktes

calcMode: Animationsgeschwindigkeitsmodus. diskret |.linear |.spline

keySplines: Legt die Bewegungs-Bezier-Kontrollpunkte fest, gültig, wenn calcMode Spline ist

circle zeichnet einen Kreis, füllt ihn mit Farbe, umschließt und positioniert ihn mit dem g-Tag, transform legt die anfängliche Verformung fest und animateTransform legt die Animation fest. Schauen Sie sich jetzt den Code an, ich glaube, Sie werden nicht mehr verwirrt sein:

<svg class="lds-message" width="80px" height="80px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
    <g transform="translate(20 50)">
        <circle cx="0" cy="0" r="7" fill="#e15b64" transform="scale(0.99275 0.99275)">
            <animateTransform attributeName="transform" type="scale" begin="-0.375s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
        </circle>
    </g>
    <g transform="translate(40 50)">
        <circle cx="0" cy="0" r="7" fill="#f47e60" transform="scale(0.773605 0.773605)">
            <animateTransform attributeName="transform" type="scale" begin="-0.25s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
        </circle>
    </g>
    <g transform="translate(60 50)">
        <circle cx="0" cy="0" r="7" fill="#f8b26a" transform="scale(0.42525 0.42525)">
            <animateTransform attributeName="transform" type="scale" begin="-0.125s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
        </circle>
    </g>
    <g transform="translate(80 50)">
        <circle cx="0" cy="0" r="7" fill="#abbd81" transform="scale(0.113418 0.113418)">
            <animateTransform attributeName="transform" type="scale" begin="0s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
        </circle>
    </g>
</svg>

Rendering:

Sie können auch js verwenden, um die Eigenschaften von zu steuern SVG, Steuerung Der Animationsprozess von SVG wird in eine Symbolschaltfläche umgewandelt, die auf Klicks und andere Ereignisse reagieren kann.

Das obige ist der detaillierte Inhalt vonWie erstelle ich coole dynamische Symbole mit SVG (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!