Ce chapitre vous présentera comment utiliser SVG pour créer des icônes dynamiques sympas en HTML5 ? (exemple de code). Les amis dans le besoin peuvent s'y référer.
1. Éléments graphiques de base
SVG comporte des éléments de forme prédéfinis : rectangle
<!-- 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. Style et effet
Le style de l'élément svg peut être écrit comme l'attribut de la balise, ou celui-ci. peut être écrit dans le style. Voici quelques principaux attributs de style :
trait : couleur du trait
trait-largeur : largeur du trait
Stroke-opacity : Transparence du trait
fill : couleur de remplissage, c'est-à-dire arrière-plan
fill-opacity : transparence de la couleur de remplissage
Transformation : transformation graphique, similaire à la transformation CSS3
svg prend également en charge de nombreux effets de filtre, notamment les dégradés, les ombres, les flous, le 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 dans 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 comprendre la transformation et le système de coordonnées, vous pouvez vous référer à ici.
3. Éléments auxiliaires
SVG possède plusieurs éléments auxiliaires :
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
<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. Mise en œuvre de l'animation
svg L'effet d'animation est implémenté en fonction de l'élément de balise d'animation :
SVG est très flexible en écriture. Le style peut être écrit sous forme d'attribut de balise ou dans le style. Les balises d'animation peuvent spécifier des éléments via xlink ou être écrites à l'intérieur d'éléments d'animation. Ce qui suit montre la méthode d'écriture xlink d'animateTransform :
<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>
L'animation dans l'exemple ci-dessus est la transition de A à B. Pour former un cycle fluide, au moins trois points clés doivent être définis. animateTransform prend en charge des paramètres d'attributs plus flexibles :
values : valeurs de plusieurs points clés, remplaçant from et to, tels quevalues="0;1;0"
keyTimes : suivi de valeurs En conséquence, les points temporels de chaque point
calcMode : mode vitesse d'animation. discret | linéaire | spline
keySplines : définit les points de contrôle du mouvement de Bézier, valides lorsque calcMode est spline
5. 🎜>circle dessine un cercle, remplissez la coloration, enveloppez-le et positionnez-le avec la balise g, transform définit la déformation initiale et animateTransform définit l'animation. Maintenant regardez le code, je pense que vous ne serez plus confus :
Rendu :
<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>
Vous pouvez également utiliser js pour contrôler le attributs de svg , contrôlez le processus d'animation de svg et créez des boutons d'icônes pouvant répondre aux clics et à d'autres événements.
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!