points

L'attribut point défini une liste de points. Chaque point est défini par deux nombres représentant les coordonnées X et Y dans le système de coordonnées de l'utilisateur. Si une coordonnées est dépareillée elle sera ignorée.

Les éléments <polyline> et <polygon> utilisent cet attribut.

Exemple

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
  <!-- polyline est une forme ouverte -->
  <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />

  <!-- polygon est une forme fermée -->
  <polygon
    stroke="black"
    fill="none"
    transform="translate(100,0)"
    points="50,0 21,90 98,35 2,35 79,90" />

  <!--
  Il est généralement recommendé de séparer les valeurs X et Y
  avec une virgule et les coordonées avec des espaces.
  Cela est plus lisible.
  -->
</svg>

polyline

Pour un élément <polyline>, points défini une liste de point, chaqu'un représente le vecteur pour tracer la ligne. Chaque point est défini par X et Y dans le système de coordonées de l'utilisateur.

Note : Un polygone est une forme ouverte, ce qui implique que le dernier point n'est pas connecté au premier point.

Valeur	[ `<number>`+ ]#
Valeur par défaut	aucune
Peut être animé	Oui

Exemple

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
  <!-- polyline est une forme ouverte -->
  <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />
</svg>

polygon

Note : Un polygone est une forme fermée, ce qui implique que le dernier point est connecté au premier.

Valeur	[ `<number>`+ ]#
Valeur par défaut	aucune
Peut être animé	Oui

Example

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
  <!-- polygon est une forme fermée -->
  <polygon stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />
</svg>

Spécifications

Specification
Scalable Vector Graphics (SVG) 2 # PolygonElementPointsAttribute
Scalable Vector Graphics (SVG) 2 # PolylineElementPointsAttribute