Maison > Article > interface Web > Comment les icônes dynamiques SVG sont implémentées
Comment les icônes dynamiques SVG sont implémentées
- 不言original
- 2018-07-18 17:59:088424parcourir
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 
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
- 9f9d05a576cea0d265e9d798da82bdec 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 2199a63ce40299beb55b2a8b469dfcd6.
- 5aaf33f5e4c7c54d016a539db37ebcc8 peut créer sa propre fenêtre, qui a à la fois la fonction de regroupement 3e85b886453624fdb0fdf16e0b451ee0 et la fonction invisible initiale de 9f9d05a576cea0d265e9d798da82bdec.
- 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 3e85b886453624fdb0fdf16e0b451ee0 et en décalant la position de 3e85b886453624fdb0fdf16e0b451ee0. Dessinez plusieurs cercles disposés horizontalement comme suit et définissez différentes tailles de zoom pour obtenir
animation svg L'effet est obtenu basé sur l'élément de balise d'animation :
95b9bf201d21a40abe523e82bfc3ece7 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>b32227fb1e5c965892584259ad65af80 a58dd4d994b77302e7cf950921ee5f32 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>
相关推荐：
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!