Share
Il va sans dire que SVG n'est pas aussi largement utilisé que de nombreux membres de la communauté du développement Web pourraient le croire. En mettant le débat de côté, dans ce tutoriel, je vais montrer comment utiliser des SVG en ligne, couvrant un éventail de techniques et explorant l'interaction entre une page Web et un graphique. Utilisés conjointement avec d'autres normes émergentes en HTML5, JavaScript et CSS3, les SVG en ligne peuvent considérablement améliorer l'expérience utilisateur..
Vous pouvez interagir avec les éléments SVG à l'aide de techniques DOM, comme vous le feriez avec d'autres éléments de page Web..
Dans ce tutoriel, nous allons travailler à travers un exemple pratique de SVG en ligne en créant un composant simple représentant un jeu d’enregistrements. L'enregistrement tournera et l'utilisateur pourra interagir avec lui - en appuyant sur pour le ralentir, puis en le relâchant pour l'accélérer à nouveau. Le fichier SVG contiendra également un bouton sur lequel les utilisateurs pourront cliquer pour modifier l’enregistrement, ce qui modifiera légèrement son apparence. Les éléments SVG visibles seront enrichis avec des filtres de dégradés et d'ombre portée.
Regardez la démo maintenant pour avoir une idée claire de ce que nous construisons.
Comme vous le savez probablement, les SVG en ligne sont conformes aux normes HTML5 émergentes. Par conséquent, le code que nous utilisons dans ce didacticiel ne sera pas totalement pris en charge par tous les navigateurs. Bien que les SVG en ligne soient théoriquement supportés par toutes les versions actuelles des principaux navigateurs, les animations internes et les effets interactifs que nous utiliserons ne le sont pas encore si bien. Le résultat final devrait fonctionner correctement dans les versions actuelles de Firefox, Chrome et Opera. Comme toujours avec les techniques HTML5, veillez à ne pas utiliser ces effets sur les sites en direct sur lesquels vous travaillez et incluez des alternatives si possible..
Nous allons creuser et commencer par créer un contour de page HTML5, comme suit:
L’un des principaux avantages de l’utilisation de SVG est son évolutivité. Pour exploiter cela, nous allons principalement utiliser des valeurs relatives pour définir le contenu SVG. Ajoutez un élément conteneur pour le SVG dans le corps de la page:
Pour voir comment le SVG se situe dans l'élément conteneur, ajoutez ce qui suit à la section style de votre en-tête de page:
#picHolder background: #dedeff; bordure: solide 1px # 666666;
Dans l'élément conteneur du corps de votre page, ajoutez le contour de l'élément SVG, comme suit:
Nous avons défini la largeur et la hauteur sur 100%, car nous allons spécifier la largeur de l'élément conteneur. Cependant, plutôt que de spécifier explicitement les dimensions, nous utiliserons plutôt une fonction JavaScript pour révéler la facilité avec laquelle vous pouvez agrandir et réduire le SVG. Vous pouvez inclure une largeur et une hauteur fixes dans la balise SVG d’ouverture ou la section de style..
Les formes visibles dans le graphique seront définies à l'intérieur de l'élément SVG. Avant cela, nous allons travailler sur le defs section. le defs section est l'endroit où vous placez les définitions auxquelles vous pourrez vous référer ultérieurement lors de la création de vos formes. Pour ce tutoriel, le defs La section contient des définitions pour quelques remplissages dégradés et quelques ombres portées. Ajoutez cette nouvelle section à l'intérieur de l'élément SVG:
Les éléments que nous plaçons dans cette section n'apparaîtront pas dans l'image, mais seront utilisés comme remplissages et filtres pour les formes correspondantes. Nous allons inclure plusieurs dégradés. alors travaillons sur chacun à son tour.
Le premier en haut est un dégradé linéaire:
Ce dégradé sera spécifié comme remplissage pour la zone du rectangle d’arrière-plan. le x1 et y1 les attributs représentent les points de départ du dégradé dans la forme remplie, le dégradé s’étendant de là au point représenté par x2 et y2. Dans ce cas, le dégradé va de haut en bas. Les éléments d'arrêt représentent des points de couleur dans le dégradé. Le premier indique que 10% du début du dégradé sera une couleur rouge foncé et le deuxième arrêt que 90% de la fin du dégradé sera une couleur jaune. Entre ces deux points, le dégradé mélangera les couleurs les unes dans les autres. Les deux couleurs ont une opacité totale.
Ensuite, ajoutons un dégradé pour l'enregistrement lui-même. Celui-ci est un peu plus complexe - c'est un dégradé radial avec plusieurs arrêts de couleur:
Un gradient radial commence à l’intérieur du cercle, les parties les plus internes et externes du cercle étant définies par cx, cy, fx et fy, énumérés à côté du rayon. Dans ce cas, le dégradé radial va occuper la totalité de la forme du disque circulaire. Le gros du disque sera noir, avec deux anneaux de couleur légèrement plus claire représentant les sections les plus lisses au centre du disque et ses bords. Nous allons également placer une étiquette sur le disque en son centre, de sorte que le premier patch de couleur plus claire apparaîtra juste en dehors de cela. Ajoutez le dégradé d'étiquette suivant:
Il s'agit d'un simple dégradé linéaire qui servira de remplissage pour l'étiquette d'enregistrement circulaire. Cependant, notez que l'ID du dégradé a un zéro à la fin de celui-ci. Cela est dû au fait que nous allons ajouter une fonction interactive, permettant à l'utilisateur de "changer l'enregistrement". Une fonction JavaScript basculera entre une plage de remplissages en dégradé pour l’élément label. Pour cela, ajoutez un autre couple de dégradés:
Les gradients ont chacun un ID se terminant par un entier incrémentant, ce qui permet de les parcourir en JavaScript. Maintenant, définissez un autre dégradé pour créer un effet de brillance au-dessus de l'enregistrement:
Cette fois, le dégradé utilise des couleurs opaques et alpha transparentes; l'effet sera un éclat subtil à travers le disque. Enfin, nous avons besoin d’un remplissage métallique pour le bouton et la broche:
Cette fois, le dégradé radial est légèrement décentré pour créer une impression de profondeur et de lumière, qui sera complétée par un filtre d'ombre portée..
Avant de finir avec le defs section, ajoutez quelques ombres portées pour donner à certaines formes un peu plus de profondeur:
Celui-ci va apparaître derrière la zone d'enregistrement. le X, y, largeur et la taille les propriétés se réfèrent à la position et aux dimensions de la forme utilisant ce filtre. Le décalage définit l'ombre par rapport à la forme d'origine. Le flou empêche la forme offset d'être de couleur unie, de sorte qu'elle apparaisse comme une ombre. Dans ce cas, seule l'ombre apparaîtra, pas la forme elle-même - l'ombre va être définie par une forme dédiée qui sera placée derrière la forme de l'enregistrement. Pour les contrôles utilisateur, qui sont circulaires et métalliques, nous souhaitons également une ombre portée, mais nous souhaitons que la forme elle-même s'affiche également:
Cette différence principale, à part la taille de l'ombre, réside dans l'élément de fusion qui conserve la forme d'origine tout en montrant l'ombre qui l'entoure..
C'est assez de préparation. passons aux graphiques! Chaque élément que vous ajoutez au corps du fichier SVG sera affiché au-dessus des éléments précédemment répertoriés. Nous allons donc travailler de bas en haut, en commençant par les formes à l'arrière et en finissant par celles à l'avant..
Tout d'abord, ajoutez une forme de rectangle pour l'arrière-plan:
le rect les dimensions et la position de l'élément sont spécifiées par rapport au SVG contenant, ce qui, si vous vous en souvenez, est relatif à la taille de l'élément contenant. Nous définirons cela plus tard en JavaScript. Dans la mesure du possible, nous utiliserons des valeurs de taille et de position relatives afin que l’ensemble de l’image, ainsi que l’animation et les interactions, puissent être agrandis ou réduits à la demande. Notez que l'élément de remplissage spécifie l'un des gradients que nous avons défini, en utilisant son attribut ID.
En haut à partir du bas se trouve l'ombre de l'enregistrement, en utilisant l'un des filtres d'ombre portée que nous avons créés:
L'ombre va se trouver derrière le disque, sous la forme d'une forme circulaire dont le rayon correspond à peu près au tiers de l'espace alloué à l'image, placé au centre. Dans ce cas, le filtre ne s'applique pas à la fusion avec l'image, le cercle lui-même n'apparaîtra pas, mais uniquement son ombre..
La prochaine étape est le disque lui-même:
Comme avec l'ombre, le cx et cy les attributs représentent le centre de l'enregistrement, qui est centré horizontalement et verticalement dans l'image, avec un rayon d'environ un tiers. Encore une fois, nous utilisons l'un des gradients que nous avons définis, ce que nous ferons dans chaque forme.
Son étiquette est en haut de la notice, ajoutez-la ensuite:
Le cercle de l'étiquette a le même point central que le disque, sur lequel il s'étend environ au tiers du chemin. Nous commençons par la première des options de dégradé d'étiquettes que nous avons définies, puis implémentons le changement d'utilisateur - nous incluons ici un attribut ID pour faire référence à cet élément en JavaScript..
Maintenant, mettons un peu de brillance sur le disque:
Lorsque le disque tourne, il va se déplacer légèrement vers la droite et vers le bas, de sorte que le brillant reste légèrement plus petit que le disque, de sorte qu'il ne semble pas s'étendre au-delà quand il bouge. Cet élément possède également un attribut ID permettant de détecter les interactions de l'utilisateur..
Pour être complet, ajoutons un petit fuseau au centre de l’enregistrement:
Cette forme utilise le dégradé métallique que nous avons créé. Nous appliquons également le deuxième filtre d'ombre portée, qui inclut le fondu de sorte que la forme et l'ombre apparaissent..
Enfin, nous avons besoin d’un petit bouton permettant aux utilisateurs de contrôler le changement d’enregistrement, en utilisant le même remplissage et le même filtre que la broche:
Cette fois, au lieu d’un élément à fermeture automatique, nous séparons les balises de cercle d’ouverture et de fermeture. En effet, nous allons animer le bouton lorsque les utilisateurs cliquent dessus et inclure l'effet d'animation entre ces balises. Notez que nous avons été en mesure de réutiliser des éléments de remplissage et de filtrage du defs section. Voici l'aspect initial du graphique une fois que les dimensions de la page sont en place:
Chaque élément que vous ajoutez au corps du fichier SVG sera affiché par-dessus les éléments précédemment répertoriés..
Maintenant que nos éléments visuels sont en place, ajoutons une animation. Nous pouvons faire tourner l’enregistrement en utilisant les transformations d’animation SVG, qui sont une extension de l’animation SMIL. Ces effets animés sont définis dans le balisage SVG. Un effet s'applique à tout élément SVG dans lequel il apparaît. Vous pouvez utiliser des transformations CSS3 sur des éléments SVG, mais les alternatives basées sur SMIL vous offrent un plus grand niveau de contrôle..
Nous allons inclure deux animations simples: l’enregistrement va tourner et le bouton va bouger un peu lorsque l’utilisateur clique dessus. Commençons par l'animation légèrement plus directe du bouton..
A l'intérieur de l'élément de forme de bouton, entre les balises de cercle d'ouverture et de fermeture que nous avons créées, ajoutez la transformation animée comme suit:
le animateTransform s'applique à un attribut XML dans l'élément dans lequel il apparaît. Dans ce cas, il s'agit d'une transformation de traduction. le de et à Les attributs représentent les positions de début et de fin de l'élément. Celles-ci sont relatives à sa position de départ. Le bouton se déplace vers la droite et vers le bas d'un pixel. La transformation commence lorsqu'un utilisateur clique, s'écoule au dixième de seconde et s'exécute une fois. Le bouton reviendra à sa position initiale une fois l'animation terminée.. Conseil: pour conserver un élément en fin de course après une animation, spécifiez remplir = "geler".
Maintenant, pour faire tourner le disque. Un animateTransform s’applique à un élément SVG, mais il faut que le spin s’applique à plus d’un élément - en particulier à l’enregistrement et à l’étiquette (et non au brillant ou à l’ombre). Plutôt que de créer des animations séparées pour chacune et de les exécuter simultanément, nous pouvons utiliser une seule transformation en regroupant ces éléments. Avant l'élément de cercle représentant l'enregistrement (avec "recordGrad" comme remplissage), ajoutez une balise de groupe d'ouverture:
Après le cercle représentant l’étiquette, fermez le groupe:
Ajoutez maintenant la transformation avant cette balise de groupe de fermeture afin qu'elle s'applique à l'ensemble du groupe:
Cette fois, l'effet animé est une transformation de rotation. L'élément effectuera une rotation de 360 degrés et, pour ajouter à l'effet, il se déplacera vers la droite et vers le bas d'un pixel à chaque rotation, sur une période d'une seconde, se répétant indéfiniment. Cette transformation comprendra également un de attribut, car il est nécessaire de spécifier la position initiale des éléments en rotation. Si vous ne spécifiez pas cette position, les éléments tournent autour de la 0, 0 point par défaut. Cependant, pour le moment, vous ne pouvez pas fournir de valeurs relatives (c’est-à-dire des pourcentages) à ces attributs, uniquement des valeurs fixes. Pour cette raison, nous allons définir le de attribut lorsque nous spécifions les dimensions SVG en JavaScript.
Maintenant, implémentons nos fonctions interactives: en cliquant sur le bouton pour changer l’enregistrement et en appuyant sur l’enregistrement pour le ralentir.
Tout d'abord, dans la section de script de votre en-tête de page, ajoutez ces variables pour compter et garder une trace des conceptions d'étiquettes:
// garde la trace de l'étiquette de l'enregistrement en cours var currLabel = 0; // modifie ceci pour un nombre différent d'étiquettes var numLabels = 3;
A présent, dans la balise d'ouverture de l'élément de cercle représentant le bouton (qui comporte désormais une animation entre ses balises), ajoutez l'écouteur d'événement de clic suivant:
onclick = "changeRecord ()"
De retour dans la section script, ajoutez le contour de la fonction:
fonction changeRecord ()
Chaque fois que l'utilisateur appuie sur le bouton, nous passons à la prochaine étiquette et revenons à la première lorsque nous atteignons la dernière:
Accentsconagua
// passe à l'étiquette suivante currLabel ++; // réinitialiser si au nombre le plus élevé if (currLabel> numLabels - 1) currLabel = 0; // définit l'attribut de remplissage sur le dégradé suivant document.getElementById ("recordLabel"). setAttribute ("fill", "url (#labelGrad" + currLabel + ")"); La dernière ligne montre comment interagir avec les éléments SVG à l'aide de techniques DOM, comme vous le feriez avec d'autres éléments de page Web. Ici, nous définissons le remplir attribut de l'élément de cercle d'étiquette à utiliser le remplissage dégradé suivant, en spécifiant l'ID de remplissage.
Ajoutez maintenant les attributs d’événement suivants à l’élément record shine (avec "shineGrad" comme remplissage), car nous allons utiliser les événements souris vers le bas et vers le haut pour déclencher le ralentissement de l’enregistrement et son accélération:
onmousedown = "onRecord ()" onmouseup = "offRecord ()"
De retour dans la section script, ajoutez la fonction lorsqu'un utilisateur appuie sur l'enregistrement:
// fonction appelée lorsque l'utilisateur appuie sur la fonction d'enregistrement onRecord ()
À l’intérieur de cette fonction, nous pouvons ralentir l’animation du disque en modifiant la animateTransform attribut de durée. Nous modifions également l'opacité de brillance pour créer l'impression de pression:
// ralentit la durée de l'animation document.getElementById ("spinTrans"). setAttribute ("dur", "5s"); // diminue l'opacité de brillance document.getElementById ("brille"). style.opacity = "0.7"; Lorsque l'utilisateur publie l'enregistrement, nous souhaitons qu'il revienne à la vitesse et à l'aspect normaux. Ajoutez donc la fonction "souris haut":
// fonction appelée lorsque l'utilisateur publie record function offRecord () // réinitialisation à la vitesse normale document.getElementById ("spinTrans"). setAttribute ("dur", "1s"); // redéfinit l'opacité sur document.getElementById ("shine"). style.opacity = "1.0"; Nous pouvons enfin définir la taille globale du SVG maintenant. En haut de la section de script, ajoutez une nouvelle variable:
// taille souhaitée de SVG var size = 300;
Nous allons d'abord utiliser 300 pixels pour la largeur et la hauteur du graphique, mais vous êtes libre de le modifier à tout moment. Définissez une fonction dans la section de script pour définir ces dimensions:
// fonction pour définir les dimensions SVG fonction setSize () // définition de css et transformation de la taille var holder = document.getElementById ("picHolder"); holder.style.height = taille + "px"; holder.style.width = taille + "px"; document.getElementById ("spinTrans"). setAttribute ("à partir de", "0", + taille / 2 + "," + taille / 2 + ""); Nous définissons la taille sur le contenant div élément. Prenez un moment pour regarder la dernière ligne de cette fonction. Comme l’animation de transformation de rotation ne peut pas utiliser de valeurs de pourcentage relatives, nous devons définir le paramètre de élément utilisant la variable de taille (divisé par deux pour le point central de l’enregistrement). Avec 300 comme taille SVG, voici comment la transformation apparaîtrait avec des valeurs fixes:
Si vous souhaitez utiliser des valeurs fixes dans votre SVG, vous pouvez le faire. Nous n'utilisons cette technique que pour démontrer l'utilisation de dimensions relatives. Enfin, appelez cette fonction à la fin de la section de script:
window.addEventListener ("DOMContentLoaded", setSize, false); Notre animation SVG interactive est maintenant terminée! Ouvrez votre page dans un navigateur prenant en charge pour voir l'effet. n'oubliez pas d'essayer d'interagir avec l'enregistrement et le bouton. Essayez de modifier la variable de taille pour voir comment les éléments SVG s’y adaptent, y compris les animations et les interactions..
Si vous souhaitez explorer davantage SVG, certains sujets à prendre en compte incluent les chemins, le texte, le masquage et le découpage. Il existe également une gamme d'options d'animation supplémentaires à prendre en compte. Bien sûr, ces effets ne fonctionneront pas pour tous les utilisateurs pour le moment, mais j'espère qu'un jour bientôt…
