C'est un peu ésotérique d'une chose, j'ai juste eu besoin de le faire moi-même une fois et j'ai trouvé cela déroutant, alors j'ai pensé que je ferais une vidéo entière dessus.
Le fait est que tout n'est pas en SVG. c'est fantastique parce que ça peut être n'importe quoi. Mais la syntaxe est juste un peu plus complexe que toutes les autres formes. Donc (peut-être pour cette raison?) Illustrator produit toujours les formes en SVG avec l'élément le plus approprié. Les rectangles sont , les autres formes constituées uniquement de lignes droites sont a , ou s'il s'agit d'une forme ouverte a , etc.
Ce serait bien, sauf que les méthodes DOM pour ces formes varient. Un élément path a une méthode appelée getTotalLength()qui vous permet de savoir combien de temps le chemin est. C'est plutôt cool et parfois utile, mais vous ne pouvez pas le faire uniquement sur un élément, aucun autre.
Une des raisons pour lesquelles vous voudrez peut-être connaître cette longueur est que vous avez l'intention de l'animer de sorte que la forme «se dessine» - un petit effet de design sympa (collection d'exemples). Vous pouvez le faire en CSS, mais c'est bien d'utiliser du JavaScript pour appliquer ce CSS afin qu'il anime la distance parfaite à chaque fois.
Alors disons que vous voulez faire cet effet de dessin, mais la forme est un donc le JavaScript échoue. Vous pouvez transformer ce polygone en un chemin, sans le changer visuellement, en y ajoutant simplement un point qui a une poignée de Bézier. Comme dans, cliquez avec l'outil Plume et faites-le glisser pour que les poignées sortent et alignez les poignées le long de la ligne déjà présente. L'existence de ce point en fera un en sortie.
Si vous faites beaucoup cela, il existe un outil appelé Poly2Path qui fonctionne et ne nécessite pas ce point superflu.