Cette propriété définit un chemin.
usage
Attributs de définition de chemin de catégorie
valeur
Variabilité Oui
Documentation des spécifications SVG 1.1 (2e édition)
La propriété d est en réalité une chaîne contenant une série de descriptions de chemins. Ces chemins consistent en les instructions suivantes :
- Moveto
- Lineto
- Curveto
- Arcto
- ClosePath
Ces éléments sont combinés en une corde. Ces différentes commandes sont sensibles à la majuscule ; Une commande majuscule indique que ses paramètres sont des positions absolues, tandis que les commandes minuscules indiquent un point relatif à la position actuelle. Une valeur négative peut être spécifiée comme paramètre pour la commande : l’angle négatif sera dans le sens antihoraire, et les positions absolues x et y seront considérées comme des coordonnées négatives. La valeur relative x négative se déplacera vers la gauche, tandis que la valeur relative y négative montera.
Moveto
La commande Moveto peut être vue comme prendre un stylo à dessiner et atterrir ailleurs. Aucun segment de ligne n’est tracé entre le point précédent et ce point spécifié. C’est une bonne idée de commencer un chemin avec une commande Moveto, car sans Moveto initialisé, le point de départ sera l’endroit où l’opération précédente a eu lieu, ce qui peut entraîner un comportement indéterminé.
Syntaxe :
M x, y ici x et y sont des coordonnées absolues, représentant respectivement les coordonnées horizontales et verticales.
m dx, dy ici dx et dy sont les distances relatives au point actuel, respectivement à droite et vers le bas.
Exemple:
En position absolue x=50, y= 100 :<chemin d="M50,100... » />
Déplacez 50 vers la droite, 100 vers le bas : <chemin d="m50,100... » />
Lineto
Contrairement à la commande Moveto, la commande Lineto dessine un segment droit. Ce segment en ligne droite se déplace de la position actuelle à la position spécifiée. La syntaxe de la commande native Lineto est « L x, y » ou « l dx, dy », où x et y sont des coordonnées absolues, et dx et dy sont respectivement les distances à droite et vers le bas. Il existe aussi les lettres H et V, qui spécifient respectivement les mouvements horizontaux et verticaux. Ils ont la même syntaxe que L, et leur version minuscule est la distance relative, tandis que la version majuscule est la position absolue.
Curveto
La commande Curvto spécifie une courbe de Bézier. Il existe deux types de courbes de Bézier : cubiques et quadratiques. Une courbe de Bézier quadratique est une courbe de Bézier cubique spéciale où les deux extrémités du point de contrôle sont identiques. La syntaxe d’une courbe de Bézier quadratique est « Q cx, cy x, y » ou « q dcx, dcy dx, dy ». Cx et Cy sont toutes deux des coordonnées absolues des points de contrôle, tandis que DCX et DCY sont les distances des points de contrôle dans les directions X et Y, respectivement.
La courbe de Bézier cubique suit le même concept que la courbe de Bézier quadratique, mais elle doit considérer deux points témoins. La syntaxe de la courbe de Bézier cubique est : « C c1x, c1y c2x, c2y x, y » ou « c dc1x, dc1y dc2x, dc2y dx, dy », où c1x, c1y et c2x, c2y sont respectivement les coordonnées absolues des points de contrôle des points de départ et de fin. DC1X, DC1Y, et DC2X, DC2Y sont relatifs au point de départ, pas au point d’arrivée. dx et dy sont respectivement les distances à droite et vers le bas.
Pour connecter des courbes de Bézier lisses, vous pouvez aussi utiliser les commandes T et S. Leur syntaxe est plus simple que celle des autres commandes Curveto car elle suppose que le premier point de contrôle est un reflet du point de contrôle précédent sur le précédent, ou qu’il s’agit en réalité du point précédent s’il n’y a pas de point de contrôle précédent. La syntaxe de T est « T x,y » ou « t dx,dy », qui correspond respectivement aux coordonnées absolues et aux distances relatives, et sert à créer une courbe de Bézier quadratique. S est utilisé pour créer une courbe de Bézier cubique, la syntaxe est « S cx, cy x, y » ou « s dcx, dcy dx, dy », où (d)cx spécifie le second point de contrôle.
Enfin, toutes les commandes de courbe de Bézier peuvent créer un graphe de Bézier multi-faces, initialiser la commande en premier, puis spécifier tous les paramètres plusieurs fois pour créer un graphe de Bézier multi-faces. Par conséquent, les deux commandes suivantes peuvent créer exactement le même chemin :
Arcto
Parfois, il est plus simple de décrire un chemin d’arc elliptique que celui d’une courbe de Bézier. Au final, l’élément chemin supporte la commande Arcto. Le centre de l’arc est calculé par d’autres variables. Une déclaration arcto est relativement une répétition de Visual Studio : « A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y ». En le déconstruisant, rx et ry sont les rayons dans les directions x et y, respectivement, et la valeur de LargeArcFlag est 0 ou 1 pour déterminer s’il faut tracer un petit arc (0) ou un grand arc (1). Le SweepFlag est aussi soit 0, soit 1, qui sert à déterminer si l’arc est dans le sens horaire (1) ou antihoraire (0). x et y sont les coordonnées de la destination. Bien que xAxisRotate supporte de changer l’orientation de l’axe des x par rapport au référentiel actuel, ce paramètre ne semble pas avoir beaucoup d’effet dans Gecko 7.
ClosePath
La commande ClosePath tracera simplement une ligne droite du point actuel au premier point du chemin actuel. C’est la commande la plus simple et elle n’a aucun paramètre. Elle suit le chemin linéaire le plus court jusqu’au point de départ, et si d’autres chemins se trouvent sur ce chemin, les chemins possibles se croisent. La syntaxe est « Z » ou « z », et les deux méthodes d’écriture ont la même fonction.
élément
Les éléments suivants peuvent utiliser l’attribut d :
Les mêmes règles peuvent s’appliquer <animate>aux chemins d’animation.
Rappel
L’origine (système de coordonnées 0,0 points) est souvent le coin supérieur gauche du contexte. Cependant<glyph>, l’origine de cet élément se trouve dans le coin inférieur gauche de sa boîte aux lettres.
Une virgule est autorisée entre deux nombres quelconques, mais pas ailleurs.
exemple
<SVG version="1.1 » id="Layer_1 » xmlns="http://www.w3.org/2000/svg » xmlns :xlink="http://www.w3.org/1999/xlink » x="0px » y="0px »
viewBox="0 0 50 50 » enable-background="nouveau 0 0 50 50 » xml :space="préserver">
<path fill="#F7931E » d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>
</svg>
Pour démontrer ce que signifie réellement d="M37,17v15H14V17H37z M50,0H0v50h50V0z », discutons de chaque sous-paragraphe de cette chaîne.
d=" M37,17 || v15 || H14 || V17 || H37 || z // M50,0 || H0 || v50 || h50 || V0 || z"
d=
Cette propriété contient les chaînes qui composent l’ensemble du SVG.
M37,17
M est l’abréviation de MoveTo. Le « M » majuscule signifie les coordonnées absolues, et le « m » minuscule la distance relative. Cela implique que c’est basé sur les coordonnées de départ, la ligne est à l’intérieur de la boîte, et que vous commencez dans le coin supérieur droit du rectangle à l’intérieur de la boîte.
37 est l’abréviation de la position de départ du svg, à 37 pixels sur l’axe X.
17 Position de départ du svg, à 17 pixels sur l’axe y.
v15
V signifie vertical. Le V majuscule indique les coordonnées absolues, et le V minuscule indique la longueur et la distance relatives. dx/dy et x/y peuvent être utilisés dans les positions correspondantes de H/V et h/v.
Ici, elle est représentée en dessinant une ligne verticale de 15 pixels par rapport à une coordonnée donnée. Cela signifie que vous dessinez 15 pixels vers les coordonnées 37,32.
H14
H signifie niveau, ce qui correspond aux coordonnées absolues car il est écrit en majuscule.
À partir de la fin de la version 15, tracez une ligne horizontale jusqu’à atteindre la coordonnée absolue 14, et terminez le dessin à la coordonnée x 14. Les traits sont situés aux coordonnées 14,32.
V17
Comme précédemment, commencez par la fin de la ligne précédente et tracez une ligne verticale jusqu’à atteindre la coordonnée 17 de l’axe y. Les traits sont situés aux coordonnées 14, 17.
H37
Enfin, en commençant par 14, 17, tracez une ligne horizontale jusqu’à atteindre la coordonnée 37 de l’axe des x. Le coup de trait est situé aux coordonnées 37,17 (valeur de M)
z
Les Z minuscules et majuscules ferment toutes deux une série de segments SVG.
,
Une virgule commence la suite de segments simples de graphiques vectoriels. La série suivante de segments de droite vectorielle simples formera la boîte extérieure.
M50,0
Commencez à l’axe des x 50 et à l’axe des y à 0.
H0
Tracez une ligne droite jusqu’à (0,0).
v50
Tracez une ligne verticale de 0,0 pixel par rapport à 50. Cette ligne sera tracée à (0,50).
H50
Tracez une ligne horizontale de 50 pixels par rapport à (0,-50). Cette ligne sera tracée à droite de (50,50).
V0
Tracez une ligne verticale jusqu’à atteindre la coordonnée 0 de l’axe y. Cela tracera une ligne vers (50,0), qui est la valeur de M.
z
Les Z minuscules et majuscules ferment toutes deux une série de segments SVG.
Attachez le code :
Enfin, le lien vers le document est joint : https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|
Publié sur 04/05/2018 11:29:47
|
|
|
|
