<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.

* Some parts of this feature may have varying levels of support.

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
<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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
polygon
fill
context-fill value
points
systemLanguage

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Voir aussi