Wie dynamische SVG-Symbole implementiert werden-HTML-Tutorial-php.cn

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 , Kreis , Ellipse , Gerade ;Polylinie>, Polygon, Pfad und Text.

 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>

Nach dem Login kopieren

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

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 sowohl die Gruppierungsfunktion von als auch 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 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>

Nach dem Login kopieren

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

　 implementiert den Übergangseffekt für ein einzelnes Attribut,

　 implementiert den Transformations-Animationseffekt,

　 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>

Nach dem Login kopieren

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>

Nach dem Login kopieren