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 , Kreis , gerade Linie, Polylinie, Polygon, Pfad und Text.

<!-- 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: . Sie stellen keine spezifischen Formen dar, sondern helfen bei der Gruppenverwaltung, Wiederverwendung usw. von grafischen Elementen. Eine ausführliche Einführung finden Sie hier.

-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.
Ermöglicht die Wiederverwendung vorhandener SVG-Grafiken. Sie können ein einzelnes SVG-Grafikelement oder ein durch definiertes Gruppenelement wiederverwenden.
Intern definierte Elemente werden nicht direkt angezeigt. Sie müssen den Stil nicht im Voraus definieren, sondern definieren ihn beim Instanziieren mit .
kann ein eigenes Fenster erstellen, das die Gruppierungsfunktion von und die anfängliche unsichtbare Funktion von hat.

Für das oben erwähnte Transformations-Basispunktproblem können Sie den Basispunkt zurücksetzen, indem Sie das -Tag verschachteln und die Position von 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:

　 realisiert den Übergangseffekt eines einzelnen Attributs;
​​Transformationsanimationseffekt realisieren;
​​Erzielen 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!