Nous contacter

  1. Accueil
  2. Blog
  3. Webdesign
  4. Maîtriser les techniques de SVG sous toutes ses formes

Maîtriser les techniques de SVG sous toutes ses formes

Le 23/02/2017

Dans Webdesign

Dernier article des techniques d'integrations centrees sur le SVG sur le BlogDuWebdesign. Au programme : Interactions avec le Javascript et path.

S'aider du SVG pour les problemes de responsive

Inspirations et techniques pour intégrateurs : Le SVG sous toutes tes formes. Si vous ne l'avez pas lu, allez donc y faire un petit tour avant la fin de continuer cet article.

Étant donné que le SVG est un sujet assez difficile d'accès, j'ai fait un article plus tôt dans le mois permettant de faire un tour d'horizon des bases : Techniques pour intégrateurs : Le SVG sous toutes tes formes #2.  Si vous n'avez pas suffisamment de connaissances sur le sujet pour pouvoir lire et comprendre des balises SVG, je vous conseille de le lire avant de revenir finir cet article.

Enfin, l'article d'aujourd'hui demandera beaucoup plus de connaissances en Javascript que les articles précédents. Si vous ne maitrisez pas du tout ce langage, vous risquez fort d'être un petit peu perdu.

Exemple 3 : Animated SVG Path by Matt Litherland

Notre exemple du jour n'a peut-être pas l'air très intéressant, mais ce sera l'exemple parfait pour notre sujet : animer un élément en suivant un "path" Svg défini à l'avance.

See the Pen Animated SVG Path by Matt Litherland (@mattsince87) on CodePen.

Commençons notre analyse en expédiant le HTML et le CSS, puis nous pourrons nous attaquer à la partie la plus intéressante du pen : le Javascript.

Au niveau du code SVG, le plus intéressant a remarqué est une absence : l'absence de toute balise permettant de dessiner ! Pas le moindre polygone ou path a l'horizon. Comme vous pouvez vous en douter, nous les retrouverons dans le Javascript. L'autre element intéressant est l'attribut "preserveAspectRatio", qui détermine si l'element SVG doit garder ses proportions uniformes ou non en cas de redimensionnement.

Preserve aspect ratio attribut

Niveau CSS, rien à signaler d'exotique, ce n'est que quelques lignes permettant de rendre la présentation graphiquement un petit peu plus accessible. Enfin, le Javascript.

Tout d'abord, il est important de noter que ce pen utilise Snap SVG, une library permettant de simplifier la création et l'animation du SVG depuis le Javascript.

Snap svg

J'avais fait un article il y a maintenant trois ans sur cette ressource, que vous pouvez allez lire si le coeur vous en dit : Insérez simplement vos images vectorielles dans vos webdesign avec Snap.svg. Sinon, notez simplement qu'il s d'une très bonne library, encore très active et maintenue aujourd'hui (une mise à jour du code tous les 15 jours sur github environ).

La deuxième chose que nous pouvons remarquer ici est que le Javascript se compose de trois blocs presque identiques, ce qui nous simplifiera la tâche ! Nous ne nous occuperons ici que du premier block (de la ligne 5 a la ligne 45).

  1.   var snapA = Snap("#svgA");
  2.  
  3.   // SVG A – "Squiggly" Path
  4.   var myPathA = snapA.path("M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215 28.8 5-16.7-7-49.1-34-44-34 11.5-31 46.5-14 69.3 9.38 12.6 24.2 20.6 39.8 22.9 91.4 9.05 102-98.9 176-86.7 18.8 3.81 33 17.3 36.7 34.6 2.01 10.2.124 21.1-5.18 30.1").attr({
  5.     id: "squiggle",
  6.     fill: "none",
  7.     strokeWidth: "4",
  8.     stroke: "#ffffff",
  9.     strokeMiterLimit: "10",
  10.     strokeDasharray: "9 9",
  11.     strokeDashOffset: "988.01"
  12.   });

 

Commençons par le commenncement, la creation de l'element path qu'il nous manquait, avec Snap("#svgA");. Pas grand-chose à expliquer non plus pour la suite, le code est assez évident.

Les lignes suivantes permettant de créer cet effet de "déroulé" sur le path a l'ouverture du pen.

  1.   // SVG A – Draw Path
  2.   var len = myPathA.getTotalLength();
  3.  
  4.   // SVG1 – Animate Path
  5.   myPathA.attr({
  6.     stroke: '#fff',
  7.     strokeWidth: 4,
  8.     fill: 'none',
  9.     // Animate Path
  10.     "stroke-dasharray": "12 6",
  11.     "stroke-dashoffset": len
  12.   }).animate({"stroke-dashoffset": 10}, 2500,mina.easeinout);
 

Nous récupérons dans la variable len la taille totale du path, puis nous l'appliquons comme "stroke-dashoffset" sur notre path. Le dashoffset permet de decaler la position du premier "creux" dans notre ligne pointille. Ensuite, nous lançons une animation pour que cette valeur devienne 10 en 2500ms, donc 2.5 secondes.

Enfin, nous arrivons à la partie permettant la création du petit cercle ainsi que son animation le long du path.

  1.   // SVG A – Circle
  2.   var CircleA = snapA.circle(32,32,16);
  3.   CircleA.attr({
  4.     fill: "#3f4445",
  5.     stroke: "#fff",
  6.     strokeWidth: 2
  7.   });
  8.  
  9.   setTimeout( function() {
  10.     Snap.animate(0, len, function( value ) {
  11.        movePoint = myPathA.getPointAtLength( value );
  12.        CircleA.attr({ cx: movePoint.x, cy: movePoint.y }); // move along path via cx & cy attributes
  13.     }, 2500,mina.easeinout);
  14.   });

 

Je ne vous ferais pas l'affront de vous expliquer le sens des 7 premières lignes, attaquons-nous directement a la suite.

Commencons avec l'énigmatique lignes 9, setTimeout( function() {. Cette ligne permet de retarder l'exécution du code des lignes 10 à 13. Du moins en théorie. Nous pouvons voir à la ligne 14 que notre timeout n'a pas de temps défini, et que le code va donc s'exécuter immédiatement ! Je ne comprends donc pas du tout l'intérêt de ce timeout, surtout que sa suppression ne change rien à l'exécution du pen. Je vais prendre cela pour une originalité de l'auteur pour l'instant. Si vous avez une meilleure explication à me donner, je serais heureux de l'entendre en commentaires.

Ensuite, nous retrouvons la fonction Snap.animate(start, end, function, time, easing), qui permet d'interpoler une variable entre deux valeurs en suivant une fonction d'easing. Grâce à cela, nous pouvons donc "suivre" le path gracea myPathA.getPointAtLength( value ), et déplacer le cercle précisément à cet endroit !

Je m'arrête ici pour l'analyse de ce pen ! Vous pourrez tout de même noter quelques petites différences entre notre bloc A et les blocs B et C. Comment est obtenu cet effet d'apparition du path pour le bloc B ? Et comment est géré la gestion de l'orientation du triangle pour le bloc C ? Vous êtes maintenant a même de chercher et répondre seuls à ces questions !

Le mot de la fin

L'un dans l'autre, je suis assez partagé sur cette série d'articles sur le SVG. D'un côté, j'ai énormément appris en écrivant ces articles (et j'espère que vous aussi en les lisant), mais d'un autre je trouve que le sujet du SVG n'était pas forcément un bon choix pour ce genre de format. Le gap d'entree dans le sujet était vraiment gros, et une fois dedans il n'y a finalement pas grand-chose à ajouter lors des analyses.

Je serais tout de même heureux d'entendre vos avis sur la question, et si vous avez un sujet qui pourrait se prêter à ce genre de série d'articles, n'hésite pas à le proposer ! Je serais content d'en discuter avec vous et pourquoi pas le prendre pour le dossier de mars.