SVG Polyline
На этой странице вы найдёте информацию об элементе SVG <polyline>, увидите примеры его использования и попробуете создать его самостоятельно.
Элемент SVG <polyline> рисует серию связанных прямолинейных отрезков через список точек. Представьте его как «соедини точки» одним непрерывным штрихом: вы задаёте координаты, и линия проводится от каждой точки к следующей. Он идеально подходит для линейных графиков, зигзагов, спарклайнов и любых незамкнутых многосегментных контуров.
На этой странице объясняется синтаксис points, одно правило стилизации, которое чаще всего нарушают новички (fill:none), чем <polyline> отличается от замкнутого <polygon>, и как управлять внешним видом углов и концов линий. Для полного ознакомления с семейством базовых фигур SVG смотрите Справочник SVG.
Описание элемента <polyline>
Элемент SVG <polyline> создаёт фигуру, состоящую только из прямых линий, соединяющих несколько точек. В отличие от элемента <polygon> — который автоматически проводит замыкающий отрезок обратно к первой точке, образуя запечатанную фигуру, — <polyline> является открытой фигурой: последняя точка не соединяется с первой. Если вам нужен замкнутый контур (треугольник, шестиугольник, звезда), используйте <polygon>. Для произвольных фигур с кривыми используйте <path>.
Важнейшее правило: задавайте fill:none
По умолчанию каждая фигура SVG заливается сплошным чёрным цветом (fill:black). Для замкнутой фигуры это логично, но <polyline> является открытой — и SVG всё равно заливает её, проводя воображаемый замыкающий край и заполняя заключённую область чёрным цветом. Это наиболее распространённая ошибка новичков: вы ожидаете тонкую линию, а получаете чёрное пятно.
Исправление состоит в том, чтобы явно отключить заливку с помощью fill:none и использовать stroke для отображения линии:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200">
<!-- WRONG: no fill set, so SVG floods the open shape with black -->
<polyline points="20,20 60,80 100,20 140,80 180,20"
style="stroke:purple;stroke-width:4" />
<!-- RIGHT: fill:none leaves a clean line -->
<polyline points="220,20 260,80 300,20 340,80 380,20"
style="fill:none;stroke:purple;stroke-width:4" />
</svg>
</body>
</html>Почти каждый <polyline>, который вы пишете, должен включать fill:none.
Пример элемента SVG <polyline>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="220" >
<polyline points="30,30 50,35 70,50 90,130 130,150 210,190" style="fill:none;stroke:purple;stroke-width:5" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Синтаксис points
Атрибут points представляет собой плоский список абсолютных пар координат, записанных в формате x,y. Точки рисуются в том порядке, в котором вы их перечисляете, и каждая пара x,y отсчитывается от верхнего левого угла системы координат SVG (x растёт вправо, y растёт вниз).
SVG снисходителен к разделителям между числами — запятые и пробелы взаимозаменяемы. Все эти записи задают одни и те же три точки:
points="30,30 50,35 70,50"
points="30 30 50 35 70 50"
points="30,30, 50,35, 70,50"Распространённое и удобочитаемое соглашение — ставить запятую внутри каждой пары и пробел между парами, как в points="30,30 50,35 70,50". Количество координат должно быть чётным; нечётное количество является ошибкой.
Пример элемента SVG <polyline> с прямыми линиями:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200" >
<polyline points="10,50 50,50 50,90 90,90 90,130 130,130 130,170" style="fill:white;stroke:blue;stroke-width:5" />
Sorry, inline SVG is not supported by your browser.
</svg>
</body>
</html>Здесь лесенка выглядит нормально, потому что fill:white совпадает с фоном страницы — но это ловушка. На цветном или узорчатом фоне белая заливка открытой фигуры будет просвечивать. Использование fill:none является более надёжным решением.
Пример с stroke-linecap и stroke-linejoin:
Два свойства представления управляют внешним видом обведённой ломаной линии: stroke-linecap определяет форму двух открытых концов линии (butt, round или square), а stroke-linejoin — форму углов в местах соединения отрезков (miter, round или bevel). Они наиболее заметны на толстых штрихах:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200">
<!-- Sharp default: square ends, mitered corners -->
<polyline points="20,40 80,140 140,40"
style="fill:none;stroke:teal;stroke-width:16;
stroke-linecap:butt;stroke-linejoin:miter" />
<!-- Soft: rounded ends and rounded corners -->
<polyline points="200,40 260,140 320,40"
style="fill:none;stroke:tomato;stroke-width:16;
stroke-linecap:round;stroke-linejoin:round" />
</svg>
</body>
</html>Сравните острый угол левой (бирюзовой) линии с плавным углом правой (томатной). Чтобы подробнее изучить эти и другие параметры обводки, смотрите SVG Stroking.
Атрибуты, специфичные для <polyline>
Только два атрибута действительно принадлежат самому элементу <polyline> — всё остальное, что вы задаёте для него (fill, stroke, stroke-width и т. д.), являются свойствами представления, унаследованными из общей модели представления SVG и рассматриваемыми отдельно ниже.
| Атрибут | Описание |
|---|---|
| points | Список точек (пары абсолютных координат x,y), определяющих ломаную линию. Это единственный обязательный атрибут. |
| pathLength | Общая длина линии в пользовательских единицах, используемая для калибровки эффектов обводки (например, штрихов). |
Свойства представления (унаследованные, не специфичные для polyline)
fill, stroke, stroke-linecap и stroke-linejoin не являются уникальными для <polyline> — это CSS-свойства представления, применяемые к большинству графических элементов SVG, которые можно задавать как в виде XML-атрибутов (stroke="purple"), так и через CSS (style="stroke:purple"). Они наследуются и переопределяются как любой другой CSS, поэтому они перечислены здесь, а не в качестве атрибутов элемента.
| Свойство | Описание |
|---|---|
| fill | Цвет, используемый для заливки (автоматически замкнутого) внутреннего пространства. Задайте fill:none для открытой линии. |
| stroke | Цвет самой линии. |
| stroke-width | Толщина линии. |
| stroke-linejoin | Тип угла, создаваемого в месте соединения двух отрезков: miter, round или bevel. |
| stroke-linecap | Форма открытых концов линии: butt, round или square. |
Элемент SVG <polyline> также поддерживает Глобальные атрибуты и Атрибуты событий.