Comment les icônes dynamiques SVG sont implémentées

Cet article vous expliquera comment implémenter les icônes dynamiques SVG. Les amis dans le besoin peuvent s'y référer.

                                                                                       Vous pouvez voir de nombreuses icônes de chargement avec des effets étonnants sur io. Ils sont tous écrits en svg, avec seulement quelques lignes de code. Ils sont plus raffinés et plus petits que les images img, et plus flexibles et efficaces que l'implémentation pure dom. Vous pouvez également faire en sorte que l'icône réponde aux événements de clic. Comment dessiner ces cercles et carrés ? Comment colorer ? Comment déménager ? Jetons d'abord un coup d'œil aux bases de SVG, puis dessinons la première icône ci-dessus. 1. Éléments graphiques de base

SVG comporte des éléments de forme prédéfinis : rectangle , cercle , ellipse , ligne droite ;polyligne>, polygone, chemin et texte.

2. Style et effet

Le style de l'élément svg peut être écrit comme l'attribut de la balise, ou il peut être écrit dans le style . Voici quelques-uns des principaux attributs de style :

 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>

trait : couleur du trait

largeur du trait : largeur du trait

• trait-opacité : la transparence du trait

• remplissage : la couleur de remplissage, c'est à dire l'arrière-plan

• remplissage-opacité : la transparence de la couleur de remplissage

• transformation : transformation graphique, similaire à la transformation css3

• svg prend également en charge de nombreux effets de filtre et peut faire des dégradés, ombres, flous et mélange d'images, etc. Vous n’avez pas besoin d’en savoir beaucoup. Par exemple, si vous souhaitez dessiner quelques cercles colorés, utilisez simplement cercle et remplissage.
• Remarque : transformez les valeurs par défaut vers le coin supérieur gauche du svg comme point de base, et non vers le centre du cercle ou un autre centre. Le coin supérieur gauche est l'origine du système de coordonnées SVG. Pour en savoir plus sur les systèmes de transformation et de coordonnées, vous pouvez vous référer ici.
  3. Éléments auxiliaires

SVG comporte plusieurs éléments auxiliaires : Ils ne représentent pas de formes spécifiques, mais aident à la gestion de groupe, à la réutilisation, etc. d'éléments graphiques. Une introduction détaillée peut être trouvée ici. Les éléments

sont généralement utilisés pour regrouper des éléments graphiques associés pour des opérations unifiées, telles que la rotation, la mise à l'échelle ou l'ajout de styles associés.

Réalise la réutilisation de graphiques SVG existants. Vous pouvez réutiliser un seul élément graphique SVG ou un élément de groupe défini par .

• Les éléments définis en interne ne seront pas affichés directement. Vous n'avez pas besoin de définir le style à l'avance, mais définissez-le lors de l'instanciation à l'aide de .

• peut créer sa propre fenêtre, qui a à la fois la fonction de regroupement et la fonction invisible initiale de .

• Pour le problème de transformation du point de base mentionné ci-dessus, vous pouvez réinitialiser le point de base en imbriquant la balise et en décalant la position de . Dessinez plusieurs cercles disposés horizontalement comme suit et définissez différentes tailles de zoom pour obtenir

4. Mise en œuvre de l'animation

animation svg L'effet est obtenu basé sur l'élément de balise d'animation :

　 Pour obtenir l'effet de transition d'un seul attribut,

 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>

　 < animateMotion> implémente des effets d'animation de chemin.

La méthode d'écriture de svg est très flexible. Le style peut être écrit comme un attribut de balise ou dans le style. La balise d'animation peut spécifier l'élément via xlink ou être écrite à l'intérieur de l'élément d'animation. Ce qui suit montre la méthode d'écriture xlink d'animateTransform :

L'animation dans l'exemple ci-dessus est la transition de A à B. Pour former un cycle fluide , au moins trois doivent être définis. Points clés. animateTransform prend en charge des paramètres d'attributs plus flexibles :

valeurs : valeurs de plusieurs points clés, remplaçant de et vers, telles que valeurs="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来画图

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!