<polygon>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

L'élément <polygon> délimite une forme close composée d'un groupe de plusieurs segments de droites. Le dernier point est relié au premier afin de fermer la forme et de relier les traits entre deux. Pour créer une forme ouverte, voir l'élément <polyline>.

Exemple

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

html

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Exemple d'un polygone avec le remplissage par défaut -->
  <polygon points="0,100 50,25 50,75 100,0" />

  <!-- Le même polygone sans remplissage et avec un contour -->
  <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
</svg>

Attributs

points: Cette attribut défini une liste de point (paire de coordonnées absolue x et y ) nécessaire pour dessiner le polygone. Type de valeur: <number>+ ; Valeur par défaut: ""; Peut être animé: oui
pathLength: Cet attribut spécifie la taille totale pour le chemin dans l'unité de l'utilisateur. Type de valeur: <number>; Valeur par défaut: aucune; Peut être animé: oui

Attributs Globaux

Attribut de base: Principalement: id et tabindex
Attribut de style: class et style
Attributs conditionnels: Principalement: requiredExtensions et systemLanguage
Attributs d'évènements: Attribut d'évènement global, Attribut d'évènement graphique
Attributs de présentation: Principalement: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect et visibility
Attributs ARIA: aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

Contexte d'usage

Catégories	Élément de forme basique, Élément graphique, Élément de forme
Contenu autorisé	Tout élément de cette liste, quel qu'en soit l'ordre : Éléments d'animation Éléments descriptifs

Interface DOM

Cet élément implémente l'interface SVGPolygonElement.

Spécifications

Specification
Scalable Vector Graphics (SVG) 2 # PolygonElement

Compatibilité avec les navigateurs

BCD tables only load in the browser

Voir aussi

Autres formes élémentaires en SVG: <circle>, <ellipse>, <line>, <polyline> et <rect>.