Wie dynamische SVG-Symbole implementiert werden

In diesem Artikel erfahren Sie, wie Sie dynamische SVG-Symbole implementieren. Freunde in Not können sich darauf beziehen.

                                                                              Sie sind alle in SVG geschrieben und benötigen nur wenige Codezeilen. Sie sind raffinierter und kleiner als IMG-Bilder und flexibler und effizienter als die reine Dom-Implementierung. Sie können das Symbol auch auf Klickereignisse reagieren lassen. Wie zeichnet man diese Kreise und Quadrate? Wie färbe ich? Wie bewegt man sich? Schauen wir uns zunächst die Grundlagen von SVG an und zeichnen dann das erste Symbol oben. 1. Grundlegende grafische Elemente

SVG verfügt über einige vordefinierte Formelemente: Rechteck 77ad1583b54047b74ea3c92831d04650, Kreis 08d376a58c30b36481b586d747b525e8, Ellipse d0201a3a8c979f08e74967dec20588b2, Gerade d0201a3a8c979f08e74967dec20588b2 ;Polylinie>, Polygone785e40170d80ec0833f2f6ee57351dc, Pfad8f08b0b4384c46cfaf134ef7016330f0 und Text7afbc23223af17d69e2ad2a4e42c6248.

 1 <!-- viewBox定义画布大小 width/height定义实际大小 --> 
 2 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" viewBox="0 0 300 300"> 
 3  
 4     <!-- 直线 (x1,y1)与(x2,y2)为两点坐标 --> 
 5     <line x1="0" y1="0" x2="250" y2="30" /> 
 6  
 7     <!-- 多边形 通过多个点的坐标形成封闭图形 --> 
 8     <polygon points="5,5 100,100 50,200" /> 
 9 
 10     <!-- 矩形 (x,y)为左上角起始点 -->
 11     <rect x="100" y="100" width="120" height="100" />
 12 
 13     <!-- 圆形 (cx,cy)圆心点 r半径 -->
 14     <circle cx="100" cy="50" r="40" stroke="black"/>
 15 
 16     <!-- 文本 (x,y)左下角坐标  -->
 17     <text x="0" y="20" style="font-size:16px;font-weight: bold">Try SVG</text>18 19 </svg>

2. Stil und Wirkung

Der Stil des SVG-Elements kann als Attribut des Tags oder im Stil geschrieben werden. Hier sind einige der wichtigsten Stilattribute:

Stroke: Strichfarbe

Stroke-width: Strichbreite

• Strich-Deckkraft: die Transparenz des Strichs

• Füllung: die Füllfarbe, d. h. Hintergrund

• Füll-Deckkraft: die Transparenz der Füllfarbe

• Transformation: Grafiktransformation, ähnlich der CSS3-Transformation

• SVG unterstützt auch viele Filtereffekte und kann Farbverläufe erstellen , Schatten, Unschärfen und 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. Weitere Informationen zu Transformations- und Koordinatensystemen finden Sie hier.
  3. Hilfselemente

SVG hat mehrere Hilfselemente: 3e85b886453624fdb0fdf16e0b451ee0 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 zum Gruppieren zusammengehöriger Grafikelemente für einheitliche Vorgänge wie Drehen, Skalieren oder Hinzufügen verwandter Stile verwendet.

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 sowohl die Gruppierungsfunktion von 3e85b886453624fdb0fdf16e0b451ee0 als auch 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 verschiedene Zoomgrößen ein, um

•  1 <svg width="80px" height="80px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"> 
   2     <g transform="translate(20 50)"> 
   3         <circle cx="0" cy="0" r="7" fill="#e15b64" transform="scale(0.99275 0.99275)" /> 
   4     </g> 
   5     <g transform="translate(40 50)"> 
   6         <circle cx="0" cy="0" r="7" fill="#f47e60" transform="scale(0.773605 0.773605)" /> 
   7     </g> 
   8     <g transform="translate(60 50)"> 
   9         <circle cx="0" cy="0" r="7" fill="#f8b26a" transform="scale(0.42525 0.42525)" />
   10     </g>
   11     <g transform="translate(80 50)">
   12         <circle cx="0" cy="0" r="7" fill="#abbd81" transform="scale(0.113418 0.113418)" />
   13     </g>
   14 </svg>

zu erhalten. 4. Implementierung der Animation

Der Animationseffekt von SVG basiert auf der Implementierung auf Animations-Tag-Elementen:

　95b9bf201d21a40abe523e82bfc3ece7 implementiert den Übergangseffekt für ein einzelnes Attribut,

　 b32227fb1e5c965892584259ad65af80 implementiert den Transformations-Animationseffekt,

　1c3f862fe048da235fb9de11bfd05e0d implementiert die Pfadanimation Effekte.

Die Schreibmethode von SVG ist sehr flexibel. Der Stil kann als Tag-Attribut oder im Stil geschrieben werden. Das Animations-Tag kann das Element über xlink angeben oder innerhalb des Animationselements 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, at Es müssen mindestens drei Eckpunkte definiert werden. animateTransform unterstützt flexiblere Attributeinstellungen:

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

keyTimes：跟values对应，各个点的时间点

calcMode：动画快慢方式。discrete | linear | paced | spline

keySplines：设置运动的贝塞尔控制点，calcMode为spline时有效

 　　对svg动画的更详细介绍，参考 这里 。

五、代码实例

　　     

　　circle画圆，fill着色，用g标签包裹并定位，transform设置初始形变，animateTransform设置动画。现在来看代码，相信不会再是一头雾水了：

<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>

 相关推荐：

JS如何操作svg来画图

Das obige ist der detaillierte Inhalt vonWie dynamische SVG-Symbole implementiert werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!