Это самый универсальный и гибкий элемент SVG для отрисовки прямых, кривых и фигурных линий, а также сложных открытых и замкнутых контуров.
Элемент “path” имеет аттрибут “d”, внутри которого находится пакет команд, определяющих траекторию и направление фигурной линии.
Примеры и код команд:
- Начальная точка (M,m) и отрезок прямой (L,l)
- Горизонтальная линия (H,h) и вертикальная (V,v)
- Дуга элипса – Elliptical Arc (A,a)
- Кубическая кривая Безье – The cubic Bézier curve
- Гладкая поликривая Безье – Smooth cubic poly Bezier curve
- Кривые Безье второго порядка – Quadratic Bezier Curves
- Гладкая поликривая Безье второго порядка – Smooth Quadratic poly Bezier
- Правила и команды заполнения путей – fill-rule=”nonzero | evenodd”
| Команда | Имя | Параметр | Описание |
| M – (absolute) m – (relative) |
moveto | (x,y) | M – переместить указатель в точку с абсолютными координатами (x,y) |
| L -(absolute) l – (relative) |
lineto | (x,y) | L – нарисовать линию от текущей точки к указанной с абсолютными координатами (x,y) |
| H – absolute) h -(relative) |
horizontal lineto | x+ | H – нарисовать горизонтальную линию от текущей точки до указанной абсолютной координатой (x) |
| V -(absolute) v -(relative) |
vertical lineto | y+ | V – нарисовать вертикальную линию от текущей точки к указанной абсолютной координатой (y) |
| A -(absolute) a -(relative) |
Elliptical Arc | mx,my rx,ry x-axis-rotation large-arc-flag sweep-flag x,y |
Рисует элиптическую кривую из начальной точки (mx,my) в конечную(x,y). Кривая имеет два радиуса (rx,ry) и два управляющих флага см. подробнее |
| C -(absolute) c -(relative) |
curveTo | (mx,my) (x1,y1) (x2,y2) (x,y) | Рисование кубической кривой Безье из начальной точки (mx,my) в конечную (x,y). Кривая имеет две контрольные точки с координатами (x1,y1) и (x2,y2) см. подробнее |
| S -(absolute) s -(relative) |
shorthand/smooth CurveTo | (mx,my) (x2,y2) (x,y) | Рисование кубической кривой Безье от текущей точки (mx,my) до заданной (x,y) с одной контрольной точкой (x2,y2) см. подробнее |
| Q-(absolute) q-(relative) |
quadratic Bezier curve | (mx,my) (x1,y1) (x,y) | Отрисовка квадратичной кривой Безье от начальной точки (mx,my) до конечной (x,y) с контрольной точкой (x1,y1) см. подробнее |
| T-(absolute) t-(relative) |
smooth quadratic Bezier Curve ) | (x,y) | Рисование квадратичной кривой Безье от текущей точки до заданной (x,y). Контрольная точка этой команды представляет собой отражение контрольной точки предыдущей команды. см. подробнее |
Все команды, могут быть в верхнем и нижнем регистре. Верхний регистр указывает на то, что последующая координата абсолютная (absolute), а нижний – относительная (relative).
1. Начальная точка (M,m) и отрезок прямой (L,l)
|
1 |
<path d="M 10 210 L 110 10 L 210 210 z" fill="#9DE281" stroke-width="3" stroke="#FDD000" /> |
- d=”M 10 210 – перемещаем перо в точку х=”10″, y=”210″
- L 110 10 – рисуем линию до точки х=”110″, y=”10″
- L 210 210 – рисуем линию до точки х=”210″, y=”210″
- замыкаем контур – “z”
Путь не замкнут, нет “z”
|
1 |
<path d="M 10 210 L 110 10 L 210 210" fill="#9DE281" stroke-width="3" stroke="#FDD000" /> |
2. Горизонтальная линия (H,h) и вертикальная (V,v)
Рисуем вертикальную линию из точки M 110 210 в точку V 110 10
|
1 |
<path d="M 110 210 V 110 10" stroke-width="3" stroke="red"/> |
|
1 2 |
<path d="M 0 200 V 200 150 h 0 50 V 150 100 H 50 100 V 100 50 H 100 150 V 50 0 H 150 200 V 0 200 z " style="stroke:red; fill: url(#grad)"/> |
Использование вертикальных и горизонтальных линий с абсолютными координатами заметно увеличивает код. При использовании относительных координат код становится заметно короче, так как задается только длина (h) от последней точки пути для горизонтальных линий и высота (v) для вертикальных линий. Сам процесс рисования становится проще, так как не нужно высчитывать абсолютные расстояния от начала координат. Для сравнения,- ниже код рисует те же ступеньки с использованием относительных величин (h) и (v) .
|
1 2 |
<path d="M 0 200 v-50 h50 v-50 h50 v-50 h50 v-50 h50 v200 z" style="stroke:red; fill: url(#grad)"/> |
Можно еще сократить код, убрав пробелы, между командами и цифрами. Для разделения положительных чисел применяется запятая.
|
1 2 |
<path d="M0,200v-50h50v-50h50v-50h50v-50h50v200z" style="stroke:red; fill: url(#grad)"/> |
SVG path часть 2 ⇛
UPD
Дабавлены два примера анимации path:
UPD2 от 23.02.2016
Добавлен онлайн генератор SVG кода path.
Ребята, огромное спасибо !!! Очень ёмкая и, на мой взгляд, лучший, русскоязычный сайт, о .svg .
СПАСИБО !!!
Благодарю за комментарий.
А на мой взгляд :-), сайт еще далёк от совершенства и намного уступает другим.
Взять к примеру этот раздел, посвященный path, являющийся фундаментальной основой всего SVG.
Поэтому в моих ближайших планах значится расширение этого раздела: добавление анимации path, онлайн генераторы path.
То, что нужно.
Спасибо.
Спасибо за комментарий.
Выше, в UPD добавлены два примера анимации path.