SVG Polygon
На этой странице вы найдёте полезную информацию об элементе SVG <polygon>, примеры использования и сможете создать его самостоятельно.
Описание элемента <polygon>
Элемент SVG <polygon> создаёт замкнутую фигуру из прямых отрезков. Многоугольник задаётся списком угловых точек (не менее трёх), и фигура замыкается автоматически: браузер проводит финальный отрезок от последней точки обратно к первой, поэтому повторять начальную координату не нужно.
Это автоматическое замыкание является ключевым отличием <polygon> от <polyline>: polyline рисует те же соединённые отрезки, но оставляет путь открытым (без отрезка обратно к началу). Используйте <polygon> для заполненных, замкнутых фигур — треугольников, звёзд, стрелок, — а <polyline> — для открытых путей, например зигзагообразных линий или графиков.
Атрибут points
Форма фигуры полностью описывается атрибутом points. Он содержит список пар координат x,y в единицах пользовательского пространства:
points="x1,y1 x2,y2 x3,y3 ..."- Каждая пара — одна угловая точка многоугольника.
- Пары разделяются пробелами; внутри пары значения
xиyразделяются запятой (или пробелом —220 30 270 210тоже допустимо, но вариант с запятой легче читается). - Координаты абсолютные, отсчитываются от верхнего левого угла SVG-холста, где
yувеличивается вниз.
Таким образом, points="220,30 270,210 180,230" задаёт три угловые точки и, поскольку фигура замыкается автоматически, образует треугольник.
Пример элемента SVG <polygon> с тремя сторонами:
<!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 задаёт три угловые точки — 220,30, 270,210 и 180,230 — браузер соединяет их и замыкает фигуру в треугольник.
Стилизация: fill, stroke и stroke-width
Внешний вид контролируется атрибутами представления. Они не специфичны для <polygon> — они применяются ко всем SVG-фигурам, и каждый из них имеет эквивалентное CSS-свойство, поэтому их можно задавать инлайн (как в style="..." выше), в виде обычных атрибутов (fill="yellow") или из таблицы стилей CSS:
fill— цвет заливки внутренней части фигуры.stroke— цвет контура.stroke-width— толщина контура в пользовательских единицах.
Поскольку они являются настоящими CSS-свойствами, правило таблицы стилей вида polygon { fill: yellow; stroke: green; } переопределяет обычные атрибуты fill/stroke, но само переопределяется инлайн-стилем style.
Пример элемента SVG <polygon> с четырьмя сторонами:
<!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>Добавление большего числа пар координат просто добавляет больше угловых точек. Четыре точки выше образуют четырёхугольник; вы можете указать столько точек, сколько требует фигура.
Построение правильного многоугольника
Правильный многоугольник (равносторонний треугольник, квадрат, пятиугольник, шестиугольник и т. д.) имеет все стороны и углы равными. Специального атрибута для этого не существует — точки угловых вершин размещаются на окружности самостоятельно. Для n сторон на окружности радиуса r с центром в (cx, cy) каждая угловая точка i находится в:
x = cx + r * cos(2π * i / n)
y = cy + r * sin(2π * i / n)На практике точки обычно вычисляются заранее (вручную или небольшим скриптом) и записываются в атрибут points. В примерах с треугольником и четырёхугольником выше использованы координаты, подобранные вручную, поэтому их стороны не являются строго равными.
Пример элемента SVG <polygon> для создания звезды:
<!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>Понимание fill-rule (почему центр звезды пустой)
Когда контур фигуры пересекает сам себя — как у пятиконечной звезды — браузер должен решить, какие замкнутые области считаются «внутренними» и должны быть залиты. Атрибут представления fill-rule управляет этим решением. Он принимает одно из двух значений:
nonzero(значение по умолчанию) — используется в примере со звездой выше. Для любой области браузер проводит воображаемый луч наружу и считает пересечения пути с ним:+1за каждое пересечение в одном направлении,-1— в другом. Если сумма не равна нулю, область заливается. Для звезды, нарисованной одним непрерывным штрихом, внутренний пятиугольник даёт ненулевой результат, поэтому он закрашивается — звезда выглядит сплошной.evenodd— считает пересечения независимо от направления. Если их количество нечётное, область заливается; если чётное — остаётся прозрачной. По этому правилу внутренний пятиугольник звезды получает чётное число пересечений и остаётся пустым.
Таким образом, простая замена fill-rule:nonzero на fill-rule:evenodd в примере со звездой делает центр прозрачным — распространённый способ создать контур звезды.
Атрибуты
| Атрибут | Описание |
|---|---|
points | Список точек (пары абсолютных координат x,y), определяющих угловые вершины многоугольника. |
fill-rule | Способ заливки самопересекающихся областей: nonzero (по умолчанию) или evenodd. |
pathLength | Общая длина, которую следует считать длиной пути в пользовательских единицах. Задав её, можно использовать в атрибутах вроде stroke-dasharray значения, относительные к этой длине, а не к реальной геометрической длине — удобно, когда точное измерение фигуры нежелательно. |
Как и все SVG-фигуры, <polygon> также принимает атрибуты представления fill, stroke и stroke-width, а также Глобальные атрибуты и Атрибуты событий.
Связанные страницы
- SVG Polyline — аналог
<polygon>с открытым путём. - SVG Path —
<path>, наиболее гибкий элемент для рисования кривых и сложных фигур. - SVG Reference — полный список элементов и атрибутов SVG.