Chemin <path> SVG

L'élément "path" est un élément générique utilisé pour définir des formes. Toutes les formes de base peuvent être créées à l'aide de l'élément "path". L'élément <path> de SVG est utilisé pour dessiner des formes avancées composées de lignes, d'arc, de courbes, etc., avec ou sans remplissage. Cet élément <path> pourrait être le plus avancé et le plus générique de tous les éléments SVG. Il pourrait également être l'élément le plus difficile à maîtriser.

Éditeur en ligne SVG -　 SVG peut être édité en ligne, et le code source peut être converti en fonction de SVG

Exemple de voie

SVG <path> Exemple simple:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path　d="M50,50
　　　　　　　　　　　　　A30,30 0 0,1　35,20
　　　　　　　　　　　　　L100,100
　　　　　　　　　　　　　M110,110
　　　　　　　　　　　　　L100,0"
　　　　　　　　　　style="stroke:#660000;　fill:none;/>　　　　
</svg>

Le résultat après l'exécution est le suivant:

Notez comment l'image contient un arc et deux lignes droites, et comment la deuxième ligne droite n'est pas connectée à la première courbe et à la première ligne droite.

Tous les dessins avec l'élément <path> sont spécifiés dans l'attribut d. L'attribut d contient des commandes de dessin. Dans l'exemple ci-dessus, M signifie la commande 'Move to' (déplacer vers), A signifie la commande 'Arc' (arc), L signifie la commande 'Line' (ligne). Ces commandes sont fournies au stylo virtuel. Ce stylo peut se déplacer, dessiner des formes, etc.

Configuration et déplacement du stylo

La première commande de dessin de l'attribut d'un <path> doit toujours être une commande de déplacement. Avant de pouvoir dessiner quelque chose, vous devez déplacer le stylo virtuel à un endroit. Cela est réalisé par la commande M. Voici un exemple simple :

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path　d="M50,50"
　　　　　　　　　　style="stroke:#660000;　fill:none;/>
</svg>

Dans cet exemple, le stylo virtuel est déplacé vers50,50 point. La prochaine commande de dessin commence à partir de ce point.

Ligne

Dessiner une ligne est peut-être la commande la plus simple que vous pouvez donner à l'élément <path>. Utilisez les commandes L et l (minuscule L) pour dessiner une ligne :

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path　d="M50,50　　　　　　　　　　　　　L100,100"
　　　　　　　　　　style="stroke:#660000;　fill:none;/>
</svg>

Dans cet exemple, à partir du point50,50 (point de la commande M) au point100,100 (point de la commande L) pour dessiner une ligne. Après l'exécution, l'effet visuel de l'image :

La différence entre les commandes L et l réside en ce que la version majuscule (L) dessine une ligne jusqu'au point transmis à la commande, tandis que la version minuscule (l) dessine une ligne jusqu'au point transmis à la commande. Le point relatif est le point avant le début de la ligne, ajouté aux coordonnées de la commande l. Voici un exemple :
Si le stylo virtuel est situé50,50, et vous utilisez l100,100 commande, la ligne droite sera dessinée50+100,50+100=150,150. Indépendamment de la position du stylo virtuel, en utilisant L100,100 commande peut dessiner une ligne droite avec précision100,100.

Déplacer le stylo virtuel

La forme de la voie dessinée commence toujours du dernier point virtuel au nouveau point. Chaque commande de dessin a un point final. Après l'exécution de cette commande, le point virtuel se trouve au point final de cette commande de dessin. La prochaine commande de dessin commence à partir de ce point.

Courbe

Dessiner un arc à l'aide de l'élément <path> est réalisé en utilisant les commandes A et a. Comme pour les lignes droites, la commande majuscule (A) utilise des coordonnées absolues comme point final, tandis que la commande minuscule (a) utilise des coordonnées relatives (par rapport au point de départ). Voici un exemple :

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path　d="M50,50　　　　　　　　　　　　　A30,50 0 0,1　100,100"
　　　　　　　　　　style="stroke:#660000;　fill:none;/>
</svg>

Le résultat après l'exécution est le suivant:

Dans cet exemple, à partir du point50,50 au point100,100 (dans la commande A, spécifié en dernier) pour dessiner une courbe.
Le rayon de l'arc est défini par les deux premiers paramètres définis sur la commande A. Le premier paramètre est rx (le rayon dans la direction x), le second paramètre est ry (le rayon dans la direction y). En fixant rx et ry à la même valeur, un arc est généré. En fixant rx et ry à des valeurs différentes, un arc elliptique est généré. Dans l'exemple ci-dessus, rx est défini30, ry est réglé sur50.
Le troisième paramètre défini sur la commande A est la rotation de l'axe x (x-axis-rotation). Par rapport à l'axe x normal, cela définira la rotation de l'axe x de l'arc. Dans l'exemple précédent, la rotation de l'axe x est définie à 0. Dans la plupart des cas, vous n'avez pas besoin de modifier ce paramètre.

les quatre et cinquième paramètres sont le drapeau du grand arc (large-arc-flag) et le drapeau de balayage (sweep-flag) paramètres. Le drapeau du grand arc (large-arc-flag) détermine s'il faut dessiner l'arc plus petit ou plus grand qui satisfait les points de départ, d'arrivée et rx et ry. Voici un exemple de dessin4un exemple d'arc avec le drapeau du grand arc (large-arc-flag) et le drapeau de balayage (sweep-différentes combinaisons du drapeau flag) :

<svg　largeur="500"　hauteur="120">
　　　　<path　d="M40,20	A30,30 0 0,0　60,70" style="stroke: #cccc00; stroke-largeur:2; fill:none; "></path>
　　　　<path　d="M40,20	A30,30 0　1,0　60,70" style="stroke: #ff0000; stroke-largeur:2; fill:none; "></path>
　　　　<path　d="M40,20	A30,30 0　1,1　60,70" style="stroke: #00ff00; stroke-largeur:2; fill:none; "></path>
　　　　<path　d="M40,20	A30,30 0 0,1　60,70" style="stroke: #0000ff; stroke-largeur:2; fill:none; "></path>
</svg>

Le résultat après l'exécution est le suivant:

peut être40,20 au point60,70 dessiner quatre arcs différents. Un grand arc, un petit arc et chaque petit/Les deux versions miroir du grand arc. Le drapeau du grand arc détermine s'il faut dessiner un grand arc ou un petit arc. Le drapeau de balayage détermine si l'arc est miroir autour de l'axe de l'axe de départ à l'arrivée. En réalité, le drapeau de balayage contrôle la direction de dessin de l'arc (parallèlement ou en sens inverse des aiguilles d'une montre), produisant ainsi un effet de miroir.

Le premier arc dessiné est l'arc jaune. Définir le drapeau du grand arc à 0 signifie dessiner le plus petit arc possible. Le drapeau de balayage est également réglé à 0, ce qui signifie que l'arc ne sera pas miroir. Voici l'arc jaune :

L'arc second dessiné est l'arc rouge. Définir le drapeau du grand arc en1signifie dessiner le plus grand des deux arcs possibles, allant de40,20 à60,70. Voici les arcs jaunes et rouges affichés ensemble pour illustrer les différences :

les arcs verts et bleus (venant de tous les quatre arcs de l'exemple précédent) sont identiques aux arcs jaunes et rouges, mais sont dessinés avec le drapeau de balayage (sweep-flag) est réglé sur1Cela signifie qu'elles dessineront le même arc de cercle, mais en miroir sur l'axe de l'axe de départ à l'arrivée.

Courbe de Bézier quadratique

Il est possible d'utiliser l'élément <path> pour dessiner une courbe de Bezier de degré deux. Le dessin d'une courbe de Bezier de degré deux est réalisé à l'aide des commandes Q et Q. Comme une ligne droite, la commande en majuscule (Q) utilise des coordonnées absolues pour son point final, tandis que la commande en minuscule (q) utilise des coordonnées relatives (par rapport au point de départ). Voici un exemple simple de courbe de degré deux :

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M50,50　Q50,100　100,100"　
　　　　　　style="contour:　#006666;　remplissage:none;"/></svg>

Le résultat après l'exécution est le suivant:

Ce exemple dessine une courbe Bezier de degré deux, de50,50 au point100,100，point de contrôle de50,200. Le point de contrôle est le premier des deux paramètres définis par la commande Q.

Les points de contrôle tirent les courbes comme un aimant. Plus un point sur la courbe est proche du point de contrôle, plus le point de contrôle tire vers l'intérieur, ce qui signifie qu'il est plus proche du point de contrôle. Voici quelques exemples de points de contrôle dessinés sur l'image :

En réalité, si vous tracez une ligne de l'origine au point de contrôle, puis une ligne du point de contrôle au point final, la ligne qui relie le milieu de la première ligne au milieu de la deuxième ligne est la tangente de la courbe. Voici une image qui explique cela :

Courbe Bezier de degré trois

Utilisez les commandes C et c pour dessiner des courbes Bezier de degré trois. Les courbes Bezier de degré trois sont similaires aux courbes Bezier de degré deux, à l'exception qu'elles ont deux points de contrôle au lieu d'un seul point de contrôle. Comme les lignes, la commande en majuscules (C) utilise des coordonnées absolues pour son point final, et la commande en minuscule (c) utilise des coordonnées relatives (par rapport au point de départ) :

<path　d="M50,50　C75,80　125,20　150,50"
　　　　　　style="contour:　#006666;　remplissage:none;"/>

Voici l'image du résultat du dessin des points de contrôle, après l'exécution, le résultat est le suivant.

Vous pouvez créer des courbes avancées en utilisant des courbes Bezier de degré trois:

Fermeture du chemin

L'élément <path> a une commande rapide pour fermer le chemin, ce qui signifie que la ligne qui retourne au premier point après le dernier point dessiné est une commande rapide. La commande est Z (ou z-Il n'y a pas de différence entre les commandes de fermeture en majuscules et en minuscules) :

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M50,50　L100,50　L100,100　Z"
　　　　style="contour:　#006666;　remplissage:none;"/></svg>

Le résultat après l'exécution est le suivant:

Commandes combinées

Vous pouvez combiner des commandes path dans le même élément <path>. Voici un exemple :

<svg　largeur="500"　hauteur="225">
　　　　<path　d="M100,100　L150,100　a50,25　0　0,0　150,100　q50,-50　70,-170　Z"　style="contour:　#006666;　remplissage:　none;"></path>
</svg>

Dans cet exemple, une ligne droite, une courbe circulaire, une courbe Bezier de degré deux et une ligne retournant au point de départ pour fermer le chemin sont dessinées. Voici l'image générée :

Remplissage du chemin

Vous pouvez utiliser l'attribut CSS fill pour remplir le chemin. Voici un exemple :

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M100,100　L150,100　L150,150　Z"
　　　　　　style="contour:　#0000cc;
　　　　　　　　　　　　　contour-largeur:　2px;     　　　　　　　　　　　　　remplissage　　:　#ccccff;"/></svg>

Le résultat après l'exécution est le suivant:

Veuillez noter que l'intérieur de la forme est rempli en bleu clair.

Marqueur

Vous pouvez utiliser des marqueurs sur l'élément <path>. Les marqueurs sont de petits symboles situés au début, au milieu et à la fin du chemin, utilisés pour afficher la direction du chemin. Par exemple, le début du chemin peut être un cercle ou un carré, et la fin peut être une flèche.

Raccourcis symboliques

Si vous avez besoin d'utiliser la même commande à plusieurs reprises, vous pouvez omettre la lettre de la commande et ne fournir qu'un ensemble supplémentaire de paramètres, comme si la commande était là. Voici un exemple :

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M10,10　　　l100,0　　0,50　　-100,0　　0,-50"
　　　　　　style="stroke:　#000000;　fill:none;"　/></svg>

Cet exemple explique comment transmettre d'autres paramètres à la commande l, comme si chaque paramètre avait un l devant. Cela s'applique également aux autres commandes de chemin. Voici l'image générée :

Commandes de chemin complète

Voici SVG　pathÉlémentListe des commandes possibles du stylo.Chaque commande est composée d'une lettre et d'un ensemble de nombres (coordonnées, etc.), qui sont les paramètres de la commande.Les commandes en majuscule interprètent généralement les paramètres de coordonnées comme des coordonnées absolues.Les commandes en minuscule interprètent généralement les paramètres de coordonnées par rapport à la position actuelle du stylo.