SVG
Les chemins
Recherche…
Introduction
Les chemins sont l'élément le plus flexible du SVG. Un chemin est une série de courbes de Bézier cubiques ou quadratiques, disposées en splines connectées. Un chemin peut être ouvert ou fermé dans une boucle ou complexe avec plusieurs sous-composants. Si un chemin n'est pas simple, la règle de remplissage est importante pour décider quelles zones sont à l'intérieur ou à l'extérieur du chemin.
Les chemins seront normalement générés par les éditeurs automatiques. Les chemins quadratiques sont généralement utilisés pour les polices et les chemins cubiques pour les illustrations.
Paramètres
| Attributs / paramètres | La description |
|---|---|
| ré | Définit une séquence de commandes de dessin qui créent la forme. par exemple d = "M 50,60 L50,60". Les commandes de dessin majuscules désignent des coordonnées absolues. Les commandes de dessin en minuscules désignent les coordonnées relatives. |
| (...) | Commandes de dessin |
| m / m | Déplacer la position actuelle du dessin vers XY d = "M XY" |
| ll | Tracez une ligne à X, Y d = "L XY" |
| v / v | Tracez une ligne verticale à Y d = "V Y" |
| h / h | Tracez une ligne horizontale à X d = "H X" |
| a / a | Dessinez un arc à X, Y avec un rayon implicite de Rx et Ry et une rotation spécifiée par une rotation de l'axe X. Les grands drapeaux d'arc et de balayage sélectionnent lequel des 4 arcs possibles qui satisfont à ces contraintes doit être dessiné. d = "Un Rx Ry axe-rotation-rotation (degrés) grand drapeau-arc (0/1) drapeau-balayage (0/1) X, Y". |
| q / Q | Dessinez la courbe de Bézier quadratique en X, Y en utilisant le point de contrôle X1Y1 d = "X1Y1 X Y" |
| t / t | Tracez une courbe de Bézier quadratique abrégée (le point de contrôle est calculé en tant que reflet du point de contrôle de la commande de dessin q / Q précédente via la position de dessin actuelle) |
| c / c | Dessinez une courbe de Bézier cubique en X, Y en utilisant les points de contrôle X1, Y1 et X2, Y2 d = "C X1Y1, X2Y2, XY" |
| s / s | Dessinez une courbe de Bézier cubique abrégée (le premier point de contrôle est calculé en tant que réflexion du second point de contrôle de la commande de dessin c / C précédente via la position de dessin actuelle). |
| - z / Z | Fermez le chemin en traçant une ligne au début du chemin (ou chemin si un autre z a déjà été utilisé) |
| (...) | (fin de liste) |
| longueur du trajet | (Facultatif) Permet à l'auteur de spécifier un pathLength nominal qui sera utilisé pour l'étalonnage dans d'autres calculs, par exemple pour du texte le long d'un chemin |
| Paramètres de course | commun à tous les éléments de forme et de dessin |
| accident vasculaire cérébral | Couleur du chemin |
| largeur du trait | Largeur du chemin |
Remarques
Des informations détaillées sur l'élément de path SVG peuvent être trouvées dans la Recommandation W3C pour SVG .
Tracez une ligne bleue en diagonale à l'aide de la commande L path
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 L 100,50" stroke="blue" stroke-width="5" />
</svg>
Résultat:
Tracez une ligne orange horizontale à l'aide de la commande de dessin H
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 H 200" stroke="orange" stroke-width="5" />
</svg>
Résultat:
Dessine une croix rouge en utilisant les commandes de chemin (ligne relative)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 l 90,90 M 100,10 l -90,90" stroke="red" stroke-width="10" />
</svg>
Résultat:
Tracez une ligne verte verticale à l'aide de la commande V path
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 V 200" stroke="green" stroke-width="5" />
</svg>
Résultat:
Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow