SVG path element часть 1

Это самый универсальный и гибкий элемент SVG для отрисовки прямых, кривых и фигурных линий, а также сложных открытых и замкнутых контуров.
Элемент “path” имеет аттрибут “d”, внутри которого находится пакет команд, определяющих траекторию и направление фигурной линии.

Примеры и код команд:

  1. Начальная точка (M,m) и отрезок прямой (L,l)
  2. Горизонтальная линия (H,h) и вертикальная (V,v)
  3. Дуга элипса – Elliptical Arc (A,a)
  4. Кубическая кривая Безье – The cubic Bézier curve
  5. Гладкая поликривая Безье – Smooth cubic poly Bezier curve
  6. Кривые Безье второго порядка – Quadratic Bezier Curves
  7. Гладкая поликривая Безье второго порядка – Smooth Quadratic poly Bezier
  8. Правила и команды заполнения путей – 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)

  • d=”M 10 210 – перемещаем перо в точку х=”10″, y=”210″
  • L 110 10 – рисуем линию до точки х=”110″, y=”10″
  • L 210 210 – рисуем линию до точки х=”210″, y=”210″
  • замыкаем контур – “z”

path Путь

Путь не замкнут, нет

Путь не замкнут, нет “z”


2. Горизонтальная линия (H,h) и вертикальная (V,v)

Рисуем вертикальную линию из точки M 110 210 в точку V 110 10

path3
Absolute_h_v

Использование вертикальных и горизонтальных линий с абсолютными координатами заметно увеличивает код. При использовании относительных координат код становится заметно короче, так как задается только длина (h) от последней точки пути для горизонтальных линий и высота (v) для вертикальных линий. Сам процесс рисования становится проще, так как не нужно высчитывать абсолютные расстояния от начала координат. Для сравнения,- ниже код рисует те же ступеньки с использованием относительных величин (h) и (v) .

Можно еще сократить код, убрав пробелы, между командами и цифрами. Для разделения положительных чисел применяется запятая.

Так как начало координат (0,0) полотна SVG находится в левом верхнем углу, то положительное направление оси “X” будет вправо, а оси “Y” – вниз. Поэтому команда v -50 соответствует перемещению вверх на 50px от текущей точки по вертикали, а команда h -60 влево на 60px по горизонтали.

SVG path часть 2 ⇛
UPD
Дабавлены два примера анимации path:

  1. Анимация SVG path – гонки автомобилей
  2. Горизонтальный параллакс с помощью viewBox

UPD2 от 23.02.2016
Добавлен онлайн генератор SVG кода path.

SVG path element часть 1: 4 комментария

  1. Ребята, огромное спасибо !!! Очень ёмкая и, на мой взгляд, лучший, русскоязычный сайт, о .svg .
    СПАСИБО !!!

  2. Благодарю за комментарий.
    А на мой взгляд :-), сайт еще далёк от совершенства и намного уступает другим.
    Взять к примеру этот раздел, посвященный path, являющийся фундаментальной основой всего SVG.
    Поэтому в моих ближайших планах значится расширение этого раздела: добавление анимации path, онлайн генераторы path.

  3. Спасибо за комментарий.
    Выше, в UPD добавлены два примера анимации path.

Добавить комментарий