The <polygon>
element defines a closed shape consisting of a set of connected straight line segments. The last point is connected to the first point.
For open shapes, see the <polyline>
element.
The <polygon>
element defines a closed shape consisting of a set of connected straight line segments. The last point is connected to the first point.
For open shapes, see the <polyline>
element.
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- Example of a polygon with the default fill --> <polygon points="0,100 50,25 50,75 100,0" /> <!-- Example of the same polygon shape with stroke and no fill --> <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg>
points
This attribute defines the list of points (pairs of x,y
absolute coordinates) required to draw the polygon. Value type: <number>+ ; Default value: ""
; Animatable: yes
pathLength
This attribute lets specify the total length for the path, in user units. Value type: <number> ; Default value: none; Animatable: yes
class
, style
Most notably: requiredExtensions
, systemLanguage
Most notably: 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
, visibility
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
Categories | Basic shape element, Graphics element, Shape element |
---|---|
Permitted content | Any number of the following elements, in any order: Animation elements Descriptive elements |
Specification |
---|
Scalable Vector Graphics (SVG) 2 # PolygonElement |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
polygon |
1 | 12 | 1.5 | 9 | 8 | 3 | 3 | Yes | 4 | Yes | 3 | Yes |
points |
1 | 12 | 1.5 | 9 | 8 | 3 | 3 | Yes | 4 | Yes | 3 | Yes |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon