Polygone SVG<polygon>

En SVG, l'<polygon>est utilisé pour dessiner des polygones, et c'est l'une des formes de base couramment utilisées en SVG.

En utilisant la<polygon>, vous pouvez créer des polygones fermés, et vous pouvez contrôler les coordonnées des sommets du polygone, la couleur de remplissage, la couleur de contour, etc. en définissant des attributs.

Syntaxe de base

<polygon
  points="x1,y1 x2,y2 x3,y3 ..."   <!-- 多边形各个顶点的坐标 -->
  fill="fill-color"                <!-- 多边形的填充颜色 -->
  stroke="stroke-color"            <!-- 多边形的边框颜色 -->
  stroke-width="width"             <!-- 多边形的边框宽度 -->
/>

Explication des attributs :

pointsdéfinit les coordonnées de chaque sommet du polygone. Les coordonnées de plusieurs sommets sont séparées par des espaces ou des virgules, et chaque paire de coordonnées est séparée par une virgule.
filldéfinit la couleur de remplissage du polygone.
strokedéfinit la couleur de contour du polygone.
stroke-widthdéfinit la largeur du contour du polygone.

Le code suivant dessine un polygone avec un remplissage orange, un contour noir et une largeur de contour de 2 pixels. Ses coordonnées de sommets sont (100, 10), (150, 190) et (50, 190), formant un triangle fermé.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 150,190 50,190" fill="orange" stroke="black" stroke-width="2" />
</svg>