Parmi les balises de forme SVG, path est la plus puissante, et mastering path suffit à résoudre les problèmes courants de dessin.
Examinons d’abord l’utilisation de base de la balise path :
<chemin d="M100,100 L200,200 L200,400 » remplissage="#333 » course="#000 » />
L’étiquette path définit le chemin à travers la propriété d, qui définit l’information constituée d’une chaîne, et le chemin peut aussi être défini par les attributs de remplissage et de trait pour définir le remplissage et la bordure.
L’information de l’attribut d n’est en réalité pas compliquée, elle est composée de lettres et de chiffres, les nombres représentent des points de coordonnées, et les lettres sont responsables de la manière de relier ces points. Par exemple, dans l’exemple ci-dessus, M représente le point de départ et L représente une connexion en droite, donc l’information de d peut être interprétée ainsi :
M100,100 -> commence au point de coordonnées (100,100)
200 200 L - > Tracez une ligne droite de (100 100) à (200 200).
200 400 L - > Tracez une ligne droite de (200 200) à (200 400).
Dans l’attribut d de la balise chemin, il y a un total de 10 commandes utilisables, et les 5 commandes suivantes sont basiques et relativement simples.
M se déplace vers (déplacez à) coordonnées du point de départ x,y
Le chemin fermé en Z relie les points de départ et d’arrivée du chemin en ligne droite
L lineTo : Le nœud courant est connecté en ligne droite au nœud (x,y) spécifié
La droite horizontale H x maintient la coordonnée y du point actuel constante, et l’axe des x se déplace vers x, formant une droite horizontale
V la droite verticale y maintient les coordonnées x du point actuel inchangées, et l’axe y se déplace vers y, formant une ligne verticale
M et L
Regardons un autre exemple de M et L
<chemin d="M30,30 L170,30 L30,170 L170,170"></path>
Du point A (30, 30), la ligne droite est tracée jusqu’au point B (170, 30), puis tout droit au point C (30, 170), puis tout droit au point D (170, 170), et enfin forme un chemin en forme de Z.
Effet de remplissage, et Z
<chemin d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z » remplir = « jaune »></path>
Il y a deux M dans cette description de chemin, donc dans un chemin, deux chemins relativement indépendants apparaissent, le premier chemin est le même que l’exemple ci-dessus, qui est en forme de Z.
Le second chemin est un rectangle avec la commande Z apparaissant dans la description, indiquant qu’elle relie le début et la fin du chemin.
De plus, ici nous définissons la propriété de remplissage du chemin, et vous pouvez voir que le remplissage prendra effet que le chemin soit fermé ou non.
H et V
Enfin, regardons les deux commandes H et V, qui sont en réalité l’abréviation de la commande L lorsque les axes x ou y restent inchangés, donc les deux extrémités suivantes sont décrites et l’image dessinée est la même.
<chemin d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z » remplir = « jaune »></path>
<path d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z » remplir = « jaune »></path>
|
Publié sur 14/08/2017 13:15:15
|
|
|
