SVG. Руководство по синтаксису <path>

Автор: Chris Coyier    Источник: css-tricks.com
21.10.2016
1333
0
img

- это основной рисующий элемент SVG. Он может нарисовать что угодно! Я слышал, что в основе всех рисующих элементов так или иначе используется path. Элемент path использует всего один атрибут для описания того, что нужно нарисовать: атрибут d. Значение этого атрибута имеет свой собственный мини синтаксис. Он выглядит довольно неразборчиво. В нем куча цифр и буков, смешанных в одну длинную строку. Компьютерная поэзия! Я не эксперт, но думаю, что будет интересно покопаться в этом.

Вот пример path, я бы сказал, средней сложности:

<path d="M213.1,6.7c-32.4-14.4-73.7,0-88.1,30.6C110.6,4.9,67.5-9.5,36.9,6.7C2.8,22.9-13.4,62.4,13.5,110.9
  C33.3,145.1,67.5,170.3,125,217c59.3-46.7,93.5-71.9,111.5-106.1C263.4,64.2,247.2,22.9,213.1,6.7z"></path>

Для начала мы можем переформатировать его, чтоб он имел какой-то смысл (код все еще валидный):

<path d="
  M 213.1,6.7
  c -32.4-14.4-73.7,0-88.1,30.6
  C 110.6,4.9,67.5-9.5,36.9,6.7
  C 2.8,22.9-13.4,62.4,13.5,110.9
  C 33.3,145.1,67.5,170.3,125,217
  c 59.3-46.7,93.5-71.9,111.5-106.1
  C 263.4,64.2,247.2,22.9,213.1,6.7
  z"></path>

Буквы – это команды. Цифры – значения для команд. Все команды опциональны (могут быть пропущены).

К примеру, первая команда – это М. В переносном смысле М велит взять ручку и расположить ее в точке с координатами 213.1, 6.7. Пока что ничего не рисовать, просто поставить ручку. Если следующие команды будут рисовать, то они начнут с этого места.

М – это всего лишь одна команда из многих. По моим подсчетам, их 18.

Многие из них (но не все) идут в паре. У них есть ПРОПИСНАЯ версия и строчная версия. ПРОПИСНАЯ версия – абсолютная, строчная – относительная. Для примера используем команду М:

  • M 100,100 значит «Взять ручку и поставить ее в точку с координатами 100,100»
  • m 100,100 значит «Переместить ручку на 100 вниз и на 100 вправо относительно текущей позиции».

У многих команд тот же смысл. Строчные версии влияют на ручку относительно ее текущего положения.

Давайте посмотрим на две абсолютные команды:

А после них относительная команда:

Так же как M и m, команды L и l принимают две цифры: абсолютные или относительные координаты. Есть еще четыре команды, которые, по сути, являются упрощенными версиями линейной команды. Они тоже рисуют линию, но принимают только одно значение: по горизонтали или по вертикали. Когда мы использовали команду l 25,0, мы могли бы написать h 25, что означает «нарисовать линию вправо на 25 от текущего положения». Более лаконично. Старший брат H, как можно догадаться, означает рисовать линию к абсолютной горизонтальной координате 25. V и v двигается вертикально абсолютно и относительно, как вы, конечно, уже догадались.

Посмотрите это демо Криса Нагера (Chris Nager), в котором он рисует крест с помощью малого количества кода, благодаря относительным координатам:

See the Pen Hand drawn SVG rounded plus by Chris Nager (@chrisnager) on CodePen.


 

Видите последний символ, который использовал Крис? Z (или z, не важно) «закрывает» path. Эта команда опциональна, как и другие. Это простой способ нарисовать прямую линию к точке, где последний раз была установлена ручка (вероятно, к последней команде М или м). То есть вам не нужно повторять эту первую локацию и использовать линию, чтобы вернуть к ней.

Давайте посмотрим на команды, которые мы уже разобрали:

M (x,y) Переместиться к абсолютным координатам x,y
m (x,y) Переместиться на x вправо и на y вниз (или влево и вверх, если значения отрицательные)
L (x,y) Нарисовать прямую линию к координатам x,y
l (x,y) Нарисовать прямую линию к точке, которая на x правее и на y ниже относительно текущего положения (или левее и выше, если значения отрицательные)
H (x) Нарисовать горизонтальную линию к координате x
h (x) Нарисовать горизонтальную линию к точке, которая правее на x (или левее, если значение отрицательное)
V (y) Нарисовать вертикальную линию к координате y
v (y) Нарисовать вертикальную линию к точке, которая ниже на y (или выше, если значение отрицательное)
Z (или z) Нарисовать прямую линию к первой точке path

До этого мы рассматривали только прямые линии. Path – это идеально подходящий для этого элемент и синтаксис, хотя прямолинейные формы, такие как , могли бы иметь более простой синтаксис.

Суперсила path – это кривые! Их существует довольно много разных типов.

Помните первый пример кода, который мы смотрели? Там используется много C и c команд. Это кривые Безье, для них нужно больше данных.

Команда C учитывает три точки. Первые две – это управляющие точки кривой Безье. Наверное, концепт такой же, как у инструмента Pen в Adobe Illustrator:

Последняя из трех точек – это конец кривой. Точка, где кривая должна закончиться. Вот иллюстрация:

Строчная команда с – это тоже самое, но все три точки используют относительные значения.

Команда S (или s) дружит с командой С, поэтому ей нужно только 2 точки, так как предполагается, что её первая точка – это отражение последней точки предыдущей кривой С или S.

Команды Q – одна из самых простых, так как ей нужно только две точки. Кривая Безье стремится к «квадратному» расположению контрольных точек и их рукояток. А в случаи с кривой Q, рукоятки стартовой и конечной контрольных точек сходятся в одной, общей точке.

Сразу же можно рассмотреть и команду Т. Она дружит с Q, так же как S дружит с C. Когда Т идет после Q, то предполагается, что её первая контрольная точка будет отражением предыдущей, поэтому вам нужно указать лишь конечную точку.

Команда А, наверное, самая сложная. Ну или, по крайней мере, требует больше всего данных. Ей нужна информация о ширине и высоте овалов и о том, как эти овалы повернуты относительно конечной точки. И еще немного информации о том, какая кривая этих овалов вам нужна. Из MDN (Mozilla Developer Network):

Есть два овала, две разные кривые на каждом из них дают четыре варианта path. Первый аргумент – это large-arc-flag. Он определяет, какой должна быть кривая, больше или меньше, чем 180 градусов; в конечном счете, этот флаг определяет, в каком направлении будет идти кривая. Второй аргумент – это sweep-flag. Он определяет, под каким углом должна начаться кривая, отрицательным или положительным, то есть, по какому из двух кругов вы пойдете.

График Джони Тритхола (Joni Trythall) довольно ясно объясняет команду А.

Ниже письменное объяснение всех этих команд:

C
(cX1,cY1 cX2,cY2 eX,eY)
Нарисовать кривую Безье на основании 3 точек: 2 контрольных и конечной.
c Тоже самое, но с относительными значениями.
S
(cX2,cY2 eX,eY)
Тоже самое, что и кривая С, но первая точка - отражение последней точки предыдущей кривой С или S.
s Тоже самое, но с относительными значениями
Q
(cX,cY eX,eY)
Нарисовать кривую на основании одной контрольной точки и конечной.
q Тоже самое, но с относительными значениями
T
(eX,eY)
Тоже самое, что и кривая Q, но первая точка - отражение последней точки предыдущей кривой T или Q
t Тоже самое, но с относительными значениями
A
(rX,rY rotation, arc, sweep, eX,eY)
Нарисовать кривую на основе дуги овала.
a Тоже самое, но с относительными значениями

Хотите увидеть несколько примеров? Ок:

See the Pen Simple Path Examples by Chris Coyier (@chriscoyier) on CodePen.


 

Если ваш браузер был недавно обновлен и у вас есть мышка, то вы можете увидеть анимацию при наведении! Оказывается, сейчас можно помещать path прямо в CSS. К примеру…

<svg viewbox="0 0 10 10">
  <path d="M2,5 C2,8 8,8 8,5"></path>
</svg>
svg:hover path {
  transition: d 0.2s;
  d: path("M2,5 C2,2 8,2 8,5");
}

Хотите узнать больше о SVG? Я написал целую книгу о нем. Она называется «Practical SVG» и она не очень дорогая.

Перевод отрывка из 6 главы книги «Practical SVG» можно почитать вот здесь.