Rectangle SVG et autres formes SVG

Plusieurs formes peuvent être créées à l'aide du dessin SVG. Un dessin SVG peut utiliser et combiner sept formes: chemin, rectangle, cercle, ellipse, ligne, polyligne et polygone.

Chemin

L' pathélément est le plus souvent vu et est généralement généré par des programmes conçus pour exporter du code SVG.

L'exemple pathci-dessus générera un symbole «plus» (+) lorsqu'il est utilisé dans un dessin SVG. Les pathéléments SVG ne sont pas créés manuellement, mais générés via des programmes de conception capables de manipuler des graphiques vectoriels, tels qu'Illustrator ou Inkscape.

Rectangle

L'élément rectangle rectdessine un rectangle à l'écran et accepte six attributs.

xet yattribuez la position du coin supérieur gauche du rectangle widthet heightattribuez la taille du rectangle. rxet ryattribuez le rayon des coins du rectangle, similaire à la propriété CSS border-radius.

Cercle

L'élément cercle circleaccepte trois attributs.

cxet cyattribuer la position du centre du cercle, et rattribuer le rayon (taille) du cercle.

Ellipse

L'élément ellipse,, ellipseest similaire à l' circleélément sauf que le rayon est divisé en deux attributs.

Encore une fois, cxet cyattribuez la position du centre de l'ellipse, et maintenant rxet ryattribuez le rayon horizontal et vertical de l'ellipse, respectivement. Une plus grande rxdonnera une ellipse «grosse», et une plus grande rydonnera une ellipse plus fine. Si rxet rysont égaux, cela formera un cercle.

Ligne

L' lineélément est simple et accepte quatre attributs.

Les attributs x1et y1attribuent le premier point de la ligne et les attributs x2et y2attribuent le deuxième point de la ligne.

Polyligne

A polylineest une série de lignes droites connectées, affectées dans un seul attribut.

L' pointsattribut attribue une liste de points, chaque point étant séparé par une virgule.

Polygone

L' polygonélément est également une série de lignes droites connectées, mais dans ce cas, la dernière ligne se reconnectera automatiquement au point initial.

Cet exemple dessinera la même forme que polylineci - dessus, mais il dessinera une ligne supplémentaire pour «fermer» la série de lignes.

Plus d'information

Documentation MDN: MDN