Comment créer des icônes dynamiques sympas avec SVG (exemple de code)

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 , cercle ellipse>, ligne droite, polyligne, polygone, chemin et texte.

<!-- 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 : . 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 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

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

　 implémente l'effet de transition d'un seul attribut ;
​​Réaliser un effet d'animation de transformation ;
​​Obtenez des effets d'animation de chemin.

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!