Une introduction à Snap.svg

Les plats clés

• snap.svg est une bibliothèque puissante et flexible conçue spécifiquement pour travailler avec des graphiques vectoriels évolutifs (SVG), offrant des fonctionnalités telles que le masquage, l'écrasement, les motifs, les gradients, etc.
snap.svg permet aux développeurs d'animer et de manipuler à la fois le contenu SVG existant et le contenu SVG généré avec Snap.Svg, et est compatible avec tous les navigateurs modernes.
snap.svg est une bibliothèque de bas niveau, et bien qu'elle ne prenne pas encore en charge les graphiques ou la liaison aux données, il est idéal pour créer des animations complexes et un contenu SVG interactif.
Les éléments SVG peuvent être regroupés en snap.svg afin que les transformations et la manipulation des événements courantes puissent être plus facilement appliquées à tous les éléments d'un groupe.
snap.svg prend en charge la plupart des fonctionnalités SVG, y compris les gradients, les motifs et les chemins de coupure, et est compatible avec tous les navigateurs modernes. Cependant, certaines fonctionnalités SVG peuvent ne pas être entièrement prises en charge dans les navigateurs plus âgés.

Bien que SVG existe depuis plus d'une décennie, il est devenu populaire au cours des dernières années comme un moyen de dessiner des graphiques dans les applications Web, grâce à de grandes bibliothèques qui ont créé de beaux graphiques et dessins disponibles sans effort pour les développeurs: dans D3.js particuliers pour les graphiques et Raphaël pour les dessins et animations SVG cool.

De nouvelles bibliothèques exceptionnelles ont récemment émergé; Ils offrent aux développeurs et concepteurs frontaux de nouvelles approches et de nouvelles fonctionnalités incroyables:

snap.svg, comme nous allons le voir, propose les dernières fonctionnalités SVG comme le masquage, l'écrêtage, les motifs, les gradients, etc…
PATHSJS est une bibliothèque minimale pour la création de graphiques basés sur SVG. Il est conçu pour prendre en charge la programmation réactive en générant des chemins SVG qui peuvent être utilisés avec des moteurs de modèle. Il fonctionne mieux avec un moteur de modèle basé sur la moustache, tel que Racactive.
Bien qu'il ne soit pas basé sur SVG, P5 mérite une mention. C'est une tentative, et apparemment une bonne, pour surmonter les problèmes traditionnels affectant l'élément de toile HTML5 - interaction en particulier.

Dans le reste de cet article, nous allons bien examiner Snap.Svg, à partir des bases.

Raphaël

Si vous n'avez pas eu la chance de jeter un œil à Raphaël, vous devriez probablement. C'est un joli morceau de JavaScript créé comme un projet solo de Dmitry Baranovskiy. Bien qu'il ait commencé comme un projet personnel, le résultat est remarquable pour l'interface (très claire et cohérent), les performances et l'apparence (en particulier pour les animations). La bibliothèque est plus orientée vers le dessin et les animations «à main levée» plutôt que sur les graphiques. L'extension Graphaël a ensuite été publiée pour y remédier, mais elle n'est pas aussi populaire et répandue que d3.

En dépit d'être en avance sur d'autres bibliothèques, Raphaël a commencé à montrer ses limites. Par exemple, pour être compatible avec les navigateurs plus anciens, Raphaël ne prend pas en charge toutes ces nouvelles fonctionnalités SVG cool qui feraient ressortir vos animations.

C'est pourquoi son auteur a décidé de recommencer avec un nouveau projet, Snap.Svg, qui profite bien sûr de l'expérience réunie en concevant Raphaël. Snap.Svg se brise également avec le passé, permettant l'introduction d'un tout nouveau type d'effets spéciaux.

Oh, Snap!

Avant de plonger dans la syntaxe de Snap et de commencer avec quelques exemples, passons rapidement en revue les avantages et les inconvénients de cette nouvelle bibliothèque:

pros:

• Il prend en charge toutes les fonctionnalités cool que nous avons mentionnées ci-dessus.
• SNAP peut s'enrouler et animer le SVG existant. Vous pouvez générer votre SVG avec des outils comme Adobe Illustrator, Inkscape ou Sketch, ou des chaînes de chargement de SVG de manière asynchrone et interroger les pièces dont vous avez besoin pour transformer un fichier SVG en sprite.
• Il est gratuit et open source.

contre:

• Il s'agit d'une bibliothèque de bas niveau, donc si vous avez besoin de visualiser les données, malheureusement, il n'y a pas encore de support pour les graphiques.
• Il n'y a pas de prise en charge de la liaison aux données.
• Snap est un jeune projet qui n'a pas encore atteint la pleine maturité. Il est déjà génial à utiliser pour vos projets personnels, mais vous devez pondérer cet aspect avant de l'utiliser en complexe.

Comme nous l'avons mentionné, SNAP utilise les fonctionnalités non prises en charge par les anciens navigateurs. Bien qu'une table de compatibilité complète et mise à jour ne soit pas encore donnée, cette bibliothèque devrait bien fonctionner au moins avec les versions de navigateur suivantes (et plus récentes):

• Firefox ESR 18
• IE 9.0.8
• chrome 29
• opéra 24

pour commencer avec Snap

Après avoir téléchargé les fichiers source à partir du référentiel GitHub, vous pouvez les décompresser et rechercher le dossier dist, qui contient les fichiers de distribution construits. Pour des instructions détaillées sur la création de Snap avec un grognement ou pour vérifier la dernière version, jetez un œil ici.

Une fois que vous avez copié la version minifiée du fichier à l'intérieur du dossier JS de votre nouveau projet, incluez simplement le script dans votre page HTML. En supposant qu'il se trouve dans le répertoire racine de votre projet, vous pouvez simplement ajouter cette ligne juste avant la clôture de la page de clôture de la page:

<span><span><span><script> src<span >="/js/snap.svg-min.js"</script></span>></span><span><span></span>></span></span>

Maintenant, nous sommes prêts à créer une zone de dessin pour notre graphique vectoriel. Nous avons deux façons de faire ceci:

• Créer une toute nouvelle surface de dessin, qui sera annexée au DOM de la page (corps intérieur).
• Réutilisez un élément DOM existant et enveloppez-le dans une structure SNAP. Vous pouvez envelopper n'importe quel élément, mais pour les méthodes de dessin, vous aurez besoin d'un élément SVG.

La première façon vous permet de définir explicitement la largeur et la hauteur de la surface à la création dans le code JavaScript. Si vous souhaitez atteindre un plus grand niveau de séparation entre la présentation et le contenu, vous pouvez utiliser la deuxième façon, en spécifiant les valeurs dans une règle CSS. À un niveau élevé, la première méthode vous permet d'ajuster l'apparence de la surface de dessin dynamiquement, mais si vous n'en avez pas besoin, la deuxième voie est plus conforme à MVC. De plus, l'enveloppe est ce qui vous permet d'importer et de modifier les dessins SVG créés avec des outils externes, comme mentionné dans la section d'introduction.

Ainsi, par exemple, pour créer une nouvelle zone de dessin de 800 par 600 pixels, vous avez juste besoin de la ligne suivante de JavaScript:

<span><span><span><script> src<span >="/js/snap.svg-min.js"</script></span>></span><span><span></span>></span></span>

Si, au lieu de cela, vous voulez envelopper un existant, disons #ComplexsvgFromIllustrator:

<span>var s = <span>Snap</span>(800, 600);</span>

Vous pouvez toujours vous en sortir avec une seule ligne de JavaScript, pour importer la surface de dessin:

<span><span><span><svg> id<span>='complexSVGfromIllustrator'</span> version<span>="1.1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span>></svg></span>
</span>  ...
<span><span><span></span>></span></span></span>

Remarque latérale: Pour le lecteur curieux: si vous inspectez les objets Snap après la création, vous remarquerez qu'ils ont un champ papier, témoignant de l'héritage de Raphaël.

Formes

Une fois que nous avons créé notre surface de dessin, notre emballage instantané, il est temps de tirer quelques formes dessus. Disons que vous aimeriez dessiner un cercle:

<span>var s = <span>Snap</span>('#complexSVGfromIllustrator');</span>

Comme vous pouvez le voir sur les documents, les deux premiers paramètres de la méthode Circle () sont les coordonnées de son centre, tandis que le troisième est le rayon du cercle. Tous ces paramètres sont obligatoires et ne pas les fournir entraînera une erreur. La méthode Circle (), comme pour toutes les autres méthodes de dessin, renverra une référence à un objet.

Vous pouvez également dessiner des ellipses, comme indiqué dans l'échantillon de code suivant. Des rayons verticaux et horizontaux sont nécessaires cette fois. Encore une fois, tous les paramètres sont obligatoires.

<span>var paper = <span>Snap</span>('#complexSVGfromIllustrator'),
</span>    circle <span>= paper.circle(100, 50, 10);</span>

Si vous souhaitez dessiner un rectangle, utilisez le code suivant. Cela créera un rectangle avec son coin supérieur gauche à (100px, 100px), une largeur de 200px et une hauteur de 200px.

<span>var ellipse = paper.ellipse(100, 50, 10, 20);</span>

La chose cool à propos de la méthode rect () est qu'elle accepte également deux paramètres facultatifs qui contrôlent le rayon des coins arrondis, indépendamment pour les axes verticaux et horizontaux. Ces paramètres par défaut à 0 lorsqu'ils ne sont pas passés, mais veillez à ce que si vous n'en dépassez qu'un (le rayon horizontal), le second ne sera pas défini sur zéro, mais à la place, les deux assumeront la même valeur.

<span>var r = paper.rect(100, 100, 200, 300);</span>

Maintenant, si vous vouliez partir de zéro, vous pouvez créer une autre surface de dessin, ou vous pouvez simplement utiliser la méthode papier.Clear () pour effacer tous les dessins à partir de papier.

lignes et polygones

Pour couvrir des dessins plus compliqués, nous devons prendre du recul et parler de lignes de dessin. Comme vous vous en doutez, la méthode prend les quatre coordonnées des points de terminaison d'une ligne, comme indiqué ci-dessous.

<span><span><span><script> src<span >="/js/snap.svg-min.js"</script></span>></span><span><span></span>></span></span>

Ce qui est beaucoup plus intéressant, c'est la possibilité de dessiner des polylines complexes: Var Line = Paper.Polyline (10, 100, 110, 200); est en principe équivalent à la méthode line () ci-dessus, mais vous seriez probablement surpris par son résultat visuel. Pour voir pourquoi, essayons ceci

<span>var s = <span>Snap</span>(800, 600);</span>

papier.polyline () et papier.polygon () sont des alias pour la même méthode, et par défaut, le polygone (fermé) résultant est dessiné avec un remplissage noir et sans trait. C'est pourquoi vous ne pouviez pas voir la ligne tracée avec Polyline () ci-dessus (bien que vous puissiez vérifier, en inspectant la page, que le code SVG pour lui a en effet été annexé à son conteneur).

Pour modifier ce comportement, ainsi que l'apparition d'autres éléments, nous devons introduire des attributs.

Attributs

La notion d'attributs pour les éléments SNAP est un peu plus large que d'habitude, ce qui signifie qu'il inclut à la fois les attributs HTML et les attributs CSS sous la même interface (tandis que la plupart des autres bibliothèques font une distinction entre la méthode .Attr () pour les attributs HTML et '. style () 'pour les css). En utilisant la méthode élément.attr () sur un objet de wrapper Snap, vous pouvez définir sa classe ou son ID, ainsi que sa couleur ou sa largeur.

Comme mentionné ci-dessus, en utilisant SNAP, vous avez deux façons d'attribuer des propriétés CSS à un élément. L'une consiste à inclure ces propriétés dans un fichier CSS séparé, puis attribuer la classe appropriée à votre élément:

<span><span><span><svg> id<span>='complexSVGfromIllustrator'</span> version<span>="1.1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span>></svg></span>
</span>  ...
<span><span><span></span>></span></span></span>

<span>var s = <span>Snap</span>('#complexSVGfromIllustrator');</span>

Le même résultat peut être obtenu en attribuant ces propriétés à l'aide de JavaScript:

<span>var paper = <span>Snap</span>('#complexSVGfromIllustrator'),
</span>    circle <span>= paper.circle(100, 50, 10);</span>

Encore une fois, la première façon permet une meilleure séparation entre le contenu et la présentation, tandis que le second offre la possibilité de changer dynamiquement les attributs. Si vous songez à mélanger les deux stratégies, gardez à l'esprit que les règles définies dans un fichier CSS l'emporteront sur celui que vous attribuez avec Element.attr (), malgré l'ordre temporel dans lequel ils sont attribués aux éléments.

Si vous n'avez pas maintenu de référence à l'élément que vous souhaitez coiffer, ne vous inquiétez pas, vous pouvez facilement le saisir à l'aide de sélecteurs CSS:

<span>var ellipse = paper.ellipse(100, 50, 10, 20);</span>

groupes

Les éléments SVG peuvent être regroupés afin que les transformations et la manipulation des événements courantes puissent être plus facilement appliquées à tous les éléments d'un groupe. La création d'un groupe est facile:

<span>var r = paper.rect(100, 100, 200, 300);</span>

Soyez prudent: l'ordre ou les arguments sont importants! Deuxièmement, si vous attribuez un élément à un groupe, il sera supprimé de tout groupe auquel il pourrait déjà appartenir.

Les éléments peuvent, bien sûr, également ajoutés aux groupes existants après leur création:

<span>var rect = paper.rect(100, 100, 200, 300, 10); //equivalent to  paper.rect(100, 100, 200, 300, 10, 10);</span>

images

SNAP prend en charge les images raster de nidification à l'intérieur des éléments SVG, le chargeant de manière asynchrone et l'affichage uniquement lors de l'achèvement de la charge.

<span><span><span><script> src<span >="/js/snap.svg-min.js"</script></span>></span><span><span></span>></span></span>

L'objet résultant peut être traité comme un élément SVG. Remarque, si vous utilisez select () sur les images pour les récupérer plus tard, l'emballage créé sera celui des éléments HTML, de sorte que la plupart des méthodes disponibles pour les éléments SVG ne seront pas prises en charge.

transformations

Nous avons vu comment dessiner des polygones asymétriques comme les ellipses et les rectangles. Cependant, les méthodes de base nous contractent à dessiner ces figures alignées sur les axes cartésiens. Et si nous voulions dessiner une ellipse dont les axes sont tournés par 45 ° par rapport aux axes X-Y? Nous ne pouvons pas spécifier cela dans les méthodes de création, mais nous pouvons utiliser des transformations pour obtenir le même résultat.

De même, nous pourrions avoir besoin de faire pivoter une image, ou de déplacer un élément (ou un groupe) à un moment donné après sa création. La méthode transform () nous permet de le faire, en passant une chaîne de transformation SVG:

<span>var s = <span>Snap</span>(800, 600);</span>

Cette méthode peut prendre une chaîne ou un objet en entrée. Nous pouvons également utiliser la matrice de transformation associée à un élément pour appliquer la même transformation à un autre élément:

<span><span><span><svg> id<span>='complexSVGfromIllustrator'</span> version<span>="1.1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span>></svg></span>
</span>  ...
<span><span><span></span>></span></span></span>

Soyez prudent: le centre de transformation du deuxième élément sera toujours celui utilisé pour le premier, donc l'effet final pourrait vous surprendre.

La méthode transform () peut également être utilisée pour récupérer l'objet de descripteur de transformation pour l'élément sur lequel il est appelé - appelez-le simplement sans arguments. Ce descripteur peut être utilisé pour récupérer la matrice de transformation locale et la matrice de différence dans le cas des éléments imbriqués:

<span>var s = <span>Snap</span>('#complexSVGfromIllustrator');</span>

Conclusion

Cet article a fourni une introduction aux bases de Snap.Svg. Si vous êtes intéressé à voir les choses les plus cool, restez à l'écoute, car un suivi avancé sera publié bientôt.

Si vous souhaitez en savoir plus sur la visualisation des données et SNAP, voici quelques ressources utiles:

1. tutoriel snap.svg.
2. glisse à partir d'une présentation sur la visualisation des données et les techniques avancées.
3. Jetez un œil à une partie du code ci-dessus en action sur Codepen.

Questions fréquemment posées (FAQ) sur Snap Svg

Quelle est la différence entre Snap SVG et d'autres bibliothèques SVG?

SNAP SVG est une bibliothèque puissante et flexible conçue spécifiquement pour travailler avec des graphiques vectoriels évolutifs (SVG). Contrairement à d'autres bibliothèques SVG, SNAP SVG fournit une API simple et intuitive pour l'animation et la manipulation du contenu SVG existant et du contenu SVG généré avec SNAP SVG. Il prend également en charge la plupart des fonctionnalités SVG, y compris les gradients, les motifs et les chemins de coupure, et il est compatible avec tous les navigateurs modernes.

Comment puis-je commencer à utiliser Snap Svg?

Pour commencer à utiliser Snap SVG, Vous devez inclure le fichier JavaScript Snap SVG dans votre document HTML. Vous pouvez le télécharger à partir du site officiel SNAP SVG ou l'inclure directement à partir d'un CDN. Une fois que vous avez inclus le fichier SNAP SVG, vous pouvez commencer à créer et à manipuler le contenu SVG à l'aide de l'API SNAP SVG.

Puis-je utiliser Snap SVG pour des animations complexes?

Oui, Snap SVG est parfait pour créer des animations complexes. Il fournit une API d'animation puissante qui vous permet d'animer n'importe quel attribut SVG. Vous pouvez également utiliser les transformations matricielles de Snap SVG pour créer des animations complexes avec facilité. De plus, Snap SVG prend en charge les fonctions d'assouplissement, qui peuvent être utilisées pour créer des animations lisses et naturelles.

SNAP SVG est-il compatible avec tous les navigateurs?

SNAP SVG est compatible avec tous les navigateurs modernes, y compris Chrome , Firefox, Safari, Opéra et Internet Explorer 9 et plus. Cependant, certaines fonctionnalités SVG peuvent ne pas être entièrement prises en charge dans les anciens navigateurs.

Comment puis-je créer du contenu SVG interactif avec Snap SVG?

SNAP SVG fournit une API simple et intuitive pour créer du contenu SVG interactif . Vous pouvez utiliser les fonctions de traitement des événements de Snap SVG pour répondre aux interactions utilisateur, telles que des clics ou des mouvements de souris. Vous pouvez également utiliser l'API d'animation de Snap SVG pour créer des animations interactives.

Puis-je utiliser Snap SVG avec d'autres bibliothèques JavaScript?

Oui, Snap SVG peut être utilisé aux côtés d'autres bibliothèques JavaScript. Il n'interfère pas avec d'autres bibliothèques, et il ne modifie aucun objet JavaScript natif. Cela fait de Snap SVG un excellent choix pour les projets qui utilisent d'autres bibliothèques JavaScript.

Comment puis-je manipuler le contenu SVG existant avec Snap SVG?

SNAP SVG fournit une API puissante pour manipuler le contenu SVG existant. Vous pouvez utiliser les fonctions de Snap SVG pour modifier les attributs des éléments SVG, transformer les éléments SVG et animer les éléments SVG. Vous pouvez également utiliser les fonctions de sélecteur de Snap SVG pour sélectionner des éléments SVG spécifiques.

Puis-je utiliser SNAP SVG pour créer des filtres SVG?

Oui, SNAP SVG prend en charge les filtres SVG. Vous pouvez utiliser les fonctions de filtre SNAP SVG pour créer et appliquer des filtres SVG aux éléments SVG. Cela vous permet de créer un large éventail d'effets visuels, tels que le flou, l'éclairage et les ajustements des couleurs.

Comment puis-je créer des gradients avec Snap SVG?

SNAP SVG fournit une API simple pour Création de gradients SVG. Vous pouvez utiliser les fonctions de gradient de Snap SVG pour créer des gradients linéaires et radiaux, et vous pouvez utiliser les fonctions de couleur de Snap SVG pour définir les couleurs du gradient.

Puis-je utiliser Snap SVG pour créer des motifs SVG?

Oui, SNAP SVG prend en charge les modèles SVG. Vous pouvez utiliser les fonctions de modèle SNAP SVG pour créer et appliquer des modèles SVG aux éléments SVG. Cela vous permet de créer un large éventail d'effets visuels, tels que les textures et les modèles.

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!