Многоугольник SVG
Описание элемента <polygon>
Элемент SVG <polygon> создает графический объект, содержащий как минимум три стороны.
Многоугольники состоят из прямых линий, которые соединяются между собой, а их форма является «замкнутой».
Пример элемента SVG <polygon> с тремя сторонами:
Пример элемента SVG <polygon> с тремя сторонами
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="250" >
<polygon points="220,30 270,210 180,230" style="fill:yellow;stroke:green;stroke-width:3" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>В этом примере атрибут points указывает координаты x и y для каждой вершины нашего многоугольника.
Пример элемента SVG <polygon> с четырьмя сторонами:
Пример элемента SVG <polygon> с четырьмя сторонами:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="300">
<polygon points="230,20 310,220 180,260 133,244" style="fill:yellow;stroke:pink;stroke-width:5" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Пример элемента SVG <polygon> для создания звезды:
Пример элемента SVG <polygon> для создания звезды:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="230" >
<polygon points="110,20 50,208 200,88 20,88 170,208" style="fill:pink;stroke:coral;stroke-width:3;fill-rule:nonzero;"/>
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Атрибуты
| Attribute | Description |
|---|---|
| points | Этот атрибут указывает список точек (пары абсолютных координат x, y), необходимых для построения многоугольника. |
| pathLength | Этот атрибут указывает общую длину пути в пользовательских единицах. |
Элемент SVG <polygon> также поддерживает Глобальные атрибуты и Атрибуты событий.
Практика
Что верно относительно многоугольника SVG согласно содержанию предоставленной страницы?