Utilisez et réutilisez tout dans SVG… même les animations!

Si vous connaissez les animations SVG et CSS et que vous avez commencé à travailler avec eux souvent, voici quelques idées que vous voudrez peut-être garder à l'esprit avant de sauter dans le travail. Cet article consistera à apprendre à créer et à optimiser votre code avec élément , variables CSS et animations CSS.

Partie 1: l'élément SVG

Si vous êtes un développeur qui aime garder votre code au sec ou un grand fan des variables SASS / CSS, il y a de fortes chances que vous aimiez cette balise.

Supposons que vous ayez un élément qui est répété plusieurs fois dans votre graphique. Au lieu d'avoir une partie complexe de votre code répété plusieurs fois dans votre SVG, vous pouvez définir cette partie une fois, puis la cloner ailleurs dans votre document avec l'élément . Cela réduira non seulement une énorme quantité de code, mais rendra également votre balisage plus simple et plus facile à manipuler.

Pour commencer à implémenter l'élément , accédez à votre SVG et suivez ces étapes:

1. Identifiez la partie du code que vous souhaitez cloner
2. Ajoutez un identifiant à cette partie
3. Le lien dans votre balise comme ceci:

C'est ça! Votre nouveau clone est prêt, vous pouvez maintenant modifier ses attributs (par exemple X et Position Y) pour répondre à vos besoins.

Plongeons-nous dans un exemple très pratique

Je veux partager ce vrai cas où j'avais besoin d'animer un grand cube en petites unités de cube. (Imaginez le cube Rubik classique.)

Nous commencerons par dessiner l'unité du cube en SVG en utilisant des formes de base et des transformations:

 <svg viewbox="- 130 -20 300 100">
  <g>
    <rect width="21" height="24" transform="skewy (30)"></rect>
    <rect width="21" height="24" transform="skewy (-30) tradlater (21 24.3)"></rect>
    <rect width="21" height="21" transform="échelle (1,41, .81) rotation (45) traduire (0 -21)"></rect>
  </g>
</svg>

Notez que les formes sont regroupées dans un élément afin que nous puissions ajouter l'ID à toute la figure.

Ensuite, construisons un cube plus grand clonage de cette unité. Tout d'abord, nous devons envelopper le cube à partir de l'exemple précédent à l'intérieur de la balise à l'intérieur du SVG. Dans l'élément , nous pouvons mettre tout ce que nous voulons réutiliser, qui pourrait être une forme unique, un groupe, un gradient .. presque n'importe quel élément SVG. Ils ne rendront nulle part à moins que nous ne les utilisions en dehors de cette balise.

Ensuite, nous pouvons lier l'unité autant de fois que nous voulons utiliser son ID et modifier la position X et Y sur chaque clone comme ceci:

 <utilisez xlink: href="#%20cube" x="142" y="124"></utilisez>
<utilisez xlink: href="#%20cube" x="100" y="124"></utilisez>

Maintenant, nous devons positionner chaque cube en nous rappelant que le dernier élément apparaîtra à l'avant, après cela, nous aurons notre premier grand cube prêt!

XLINK: HREF est obsolète depuis SVG2, mais il est préférable de l'utiliser à des fins de compatibilité. Dans les navigateurs modernes, vous pouvez simplement utiliser HREF, mais je l'ai testé sur Safari et au moment de la rédaction du moment de la rédaction, ne fonctionne pas là-bas. Si vous utilisez Xlink: HREF, assurez-vous d'inclure cet espace de noms dans votre balise SVG: xmlns: xlink = "http://www.w3.org/1999/xlink" (vous n'en aurez pas besoin si vous décidez d'utiliser href).

Partie 2: Utilisation de variables CSS pour appliquer différents styles à votre graphique réutilisé

J'ai choisi une couleur principale pour le cube, qui est une teinte plus claire et plus foncée pour les côtés et une couleur de trait. Mais que se passe-t-il si nous voulons faire d'un deuxième cube une couleur différente?

Nous pouvons remplacer les remplissages et les traits par des variables CSS pour rendre ces attributs plus flexibles. De cette façon, nous serons en mesure de réutiliser la même unité de cube avec une autre palette (au lieu de définir une deuxième unité avec différentes couleurs pour un deuxième cube).

Pourquoi ne pas ajouter une classe au nouveau cube et changer la couleur de remplissage avec CSS? Nous allons le faire, mais d'abord, essayez d'inspecter un élément . Vous remarquerez qu'il rend dans l'ombre DOM. Ce qui signifie qu'il n'est pas vulnérable aux scripts et aux styles, comme les éléments du DOM normal. Quelles que soient les valeurs que vous définissez dans la figure à l'intérieur de seront héritées par toutes ses instances et vous ne pourrez pas réécrire ceux avec CSS. Mais si vous remplacez ces valeurs par des variables, vous pourrez les contrôler dans CSS.

Dans notre unité de cube, nous allons passer par chaque côté et remplacer les valeurs de remplissage et de trait par des noms de variables sémantiques.

Par exemple, ceci:

 <rect fill="# 00Affa" stroke="# 0079ad"></rect>

… Peut être remplacé par ceci:

 <rect fill="var (- maincolor)" tram="var (- strokeColor)"></rect>

De là, nous devons dupliquer le SVG pour construire un deuxième cube. Cependant, nous n'avons pas besoin de dupliquer les si nous gardons les deux dans le même document. Nous pouvons ajouter une classe à chaque SVG et contrôler la palette de couleurs via CSS, en redéfinissant les valeurs de la variable.

Créons une palette pour le cube bleu et un autre pour le cube rose:

 .Blue-cube {
  --MainColor: # 009CDE;
  --TrokeColor: # 0079AD;
  --lightColor: # 00Affa;
  --DarkColor: # 008BC7;
}

.pink-cube {
  --MainColor: # DE0063;
  --TrokeColor: # AD004E;
  --lightColor: # FA0070;
  --DarkColor: # C7005A;
}

De cette façon, nous pouvons ajouter autant de cubes que nous le souhaitons et changer toutes les couleurs d'un seul endroit.

Partie 3: Réutilisation des animations

L'idée de cette instance est de briser les cubes sur le plan de vol d'attente - quelque chose comme une vue explosée pour que certaines pièces s'éloignent du centre lorsque nous placerons le curseur sur les cubes.

Commençons par définir deux mouvements, un pour chaque axe: déplacez Y et déplacez X. En divisant les animations en mouvements, nous pourrons les réutiliser dans chaque cube. Les animations consisteront à déplacer le cube de sa position initiale à 30px ou 50px dans une direction. Nous pouvons utiliser une transformation traduisée (x ou y) pour y parvenir. Par exemple:

 @KeyFrames Movex {
  à {transform: tradlatex (-35px); }
}

Mais si nous voulons pouvoir réutiliser cette animation, il est préférable de remplacer la valeur numérique par une variable, comme ceci:

 @KeyFrames Movex {
  à {transform: tradlatex (var (- tradlate, 35px)); }
}

Si la variable n'est pas définie, la valeur par défaut sera de 35px.

Nous avons maintenant besoin d'au moins une classe pour se lier à l'animation. Dans ce cas, cependant, nous avons besoin de deux classes pour déplacer les cubes dans l'axe des x: .m-left et .m-droite.

 .m-left, .m-droite { 
  Animation: 2s Movex Alternate Infinite; 
}

Pour que le cube se déplace à gauche, nous avons besoin d'une valeur négative, mais nous pouvons également déclarer un nombre différent. Nous pouvons définir notre variable comme celle-ci à l'intérieur de la classe .m-gauche:

 .m-left {--translate: -50px; }

Ce qui se passe ici, c'est que nous déclarons que, lorsque nous ajoutons la classe .m-left à un élément, cela jouera l'animation Movex (celle définie dans le @keyframes) qui durera deux secondes pour se traduire dans l'axe des x et atteindre une nouvelle position qui reste -50px. Ensuite, l'animation alterne les directions afin qu'elle se déplace de la dernière position et prend deux secondes de plus pour aller à son état d'origine. Et ainsi de suite, parce que c'est une boucle infinie.

Nous pouvons déclarer une autre variable à la classe .m-droite, mais si nous ne le faisons pas, rappelez-vous qu'il prendra le 35px que nous avons déclaré au début.

La valeur de jeu d'animation par défaut est en cours d'exécution, mais peut-être que nous ne voulons pas que les cubes se déplacent tout le temps. Ce serait très distrayant et ennuyeux à utiliser sur un site avec du contenu à proximité. Alors, essayons de jouer l'animation uniquement sur le plan en ajoutant ceci:

 svg: Hover .m-left {
  Animation: 2s Movex Alternate Infinite;
}

Vous pouvez l'essayer par vous-même et constaterez que l'animation saute très rapidement à l'état initial chaque fois que nous plaçons le curseur du cube. Pour l'éviter, nous pouvons ajouter la valeur interrompue à la fin du sténographie d'animation:

 .m-left {
  Animation: 2s Movex Alternate Infinite Used;
}

Maintenant, l'animation est interrompue mais courra sur vol d'embauche en ajoutant cette ligne de CSS:

 SVG: Hover * { 
  Animation-Play-State: Running; 
}

Nous pouvons appliquer chaque classe à différents éléments du SVG. Dans le premier cube bleu, nous déplaçons des cubes simples; Dans le second, nous appliquons ces cours à des groupes de cubes.

Une dernière chose…

Ce n'est que plus tard que j'ai réalisé que je pouvais réutiliser une seule unité pour les construire tous. J'ai travaillé sur le petit cube pour le rendre suffisamment isométrique pour qu'il puisse s'aligner facilement avec les autres à côté. À ce stade, mon unité était un , mais j'ai décidé de le remplacer par des formes SVG pour réduire le code et obtenir un balisage plus propre.

J'ai appris qu'il valait mieux prendre un certain temps pour analyser ce qui peut être fait avec SVG avant de dessiner chaque forme et de gérer une énorme quantité de code. Cela pourrait prendre plus de temps au début, mais vous fera économiser beaucoup de temps et d'efforts à long terme.

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!