Home Menu Search

Saqwel

IT and other things blog

Элемент «path» документа SVG

Поделиться с друзьями

Элемент «path» самый гибкий элемент из всех элементов SVG. С его помощью можно нарисовать любой простой элемент, вроде круга, прямоугольника, эллипса и т.д. Хотя предназначен этот элемент для рисования сложных кривых.

Элемент «path» имеет два атрибута:

Поддержать автора
  • d – определяет контур фигуры и называется сегментом данных;
  • pathLength – общая длина элемента вычисленная автором, в пользовательских единицах. Насколько я понял, необходима для вычисления длины пути браузером в единицах браузера. Этот параметр имеет значение при создании эффектов текста, движения и различных операциях с чертами.

Атрибут d элемента «path» может содержать инструкции moveto, line, curve, arc, closepath.

Должен получиться такой треугольник
Должен получиться такой треугольник

В сегменте данных d содержится несколько символов, обозначающих новую линию. Рекомендуется, чтобы описание каждой линии содержало не более 255 символов. Для оптимизации размера SVG можно использовать следующие приемы:

  • Все инструкции описываются одним символом (вместо moveto пишем M).
  • Лишние пробела и разделители можно удалять (например, “M 100 100 L 200 200” содержит пробелы, которые не нужны для восприятия его браузером, поэтому пишем так “M100 100L200 200”).
  • Можно не повторять командные символы, которые указаны в документе несколько раз подряд (“L” в этой строке повторяется дважды “M 100 200 L 200 100 L -100 -200”, поэтому можно писать так “M 100 200 L 200 100 -100 -200”.
  • Можно использовать командные символы в нижнем регистре для указания относительных координат.

Команда «moveto»

Команда «moveto» (M или m) устанавливает новую текущую точку. Можно представить себе, что при указании «moveto» автор поднимает карандаш и перемещает его на новое место. Сегмент данных d (если он один) всегда должен начинаться с команды «moveto». Если «moveto» не первая команда, то создается новый подэлемент элемента «path» (возникает разрыв между первым подэлементом начинающимся с «moveto» и следующим).

Команда «moveto» не имеет параметров.

Команда «closepath»

Команда ’closepath’ (Z или z) завершает текущий подэлемент элемента «path» и автоматически создает прямую линию, соединяющую текущую точку с точкой начала подэлемента элемента «path». Если «closepath» следует сразу после «moveto», то «moveto» становится точкой начала для следующего подэлемента. Если «closepath» следует за какой-то другой командой, то точкой начала нового подэлемента становится точка начала текущего подэлемента.

Команда «closepath» не имеет параметров.

Команда «lineto»

Команда «lineto» рисует линию из текущей точки в новую точку.

  • Команда: L или l
  • Имя: lineto
  • Параметры: (x,y)+
  • Описание: Рисует линию из текущей точки в указанные (x,y) координаты, которые становятся текущей точкой. L указывает координаты в абсолютной системе координат, l в относительной.
  • Команда: H или h
  • Имя: horizontal lineto
  • Параметры: x+
  • Описание: Рисует горизонтальную линию из текущей точки (xтек,yтек) в новую точку (x, yтек). H для абсолютной системы координат, h – для относительной.
  • Команда: V или v
  • Имя: vertical lineto
  • Параметры: y+
  • Описание: Рисует горизонтальную линию из текущей точки (xтек yтек) в новую точку (xтек y). V для абсолютной системы координат, v – для относительной.

Команды создания кривых

Всего три группы команд для рисования кривых:

  • Кубическая кривая Безье (C или c, S или s). Кубическая кривая Безье описывается начальной точкой, конечной точкой и двумя контрольными точками.
  • Квадратичная кривая Безье (Q или q, T или t). Квадратичная кривая Безье описывается начальной точкой, конечной точкой и одной контрольной точкой.
  • Дуга эллипса (A или a). Эта фигура отображает сегмент окружности.

Кубическая кривая Безье

  • Команда: C или c
  • Имя: curveto
  • Параметры: (x1 y1 x2 y2 x y)+
  • Описание: Рисует кубическую кривую Безье из текущей точки до точки (x y), используя (x1 y1) как контрольную точку начала кривой и (x2 y2) как контрольную точку конца кривой.
  • Команда: S или s
  • Имя: shorthand/smooth curveto
  • Параметры: (x2 y2 x y)+
  • Описание: Рисует кубическую кривую Безье из текущей точки до точки (x, y). Первая контрольная точка создается автоматически, в соответствии с тем, как расположена вторая контрольная точка предыдущей команды. Если предыдущей команды нет или предыдущая команда не C, c, S или s, то первая контрольная точка совпадает с текущей точкой. (x2 y2) – это координаты второй контрольной точки, то есть контрольной точки конца кривой.

Ниже представлен простой пример использования

Кубическая кривая Безье
Кубическая кривая Безье

Ниже представлена картина того, как расположение контрольных точек влияет на форму кривой. Первые пять примеров иллюстрируют одиночный сегмент кривой Безье. Справа снизу представлен пример использования команды S после команды C.

Примеры кривой Безье на одиночном сегменте
Примеры кривой Безье на одиночном сегменте

Квадратичная кривая Безье

  • Команда: Q или q
  • Имя: quadratic Bezier curveto
  • Параметры: (x1 y1 x y)+
  • Описание: Рисует квадратичную кривую Безье из текущей точки до точки (x y), используя (x1 y1) как контрольную точку.
  • Команда: T или t
  • Имя: Shorthand/smooth quadratic Bezier curveto
  • Параметры: (x y)+
  • Описание: Рисует квадратичную кривую Безье из текущей точки до точки (x y). Контрольная точка создается автоматически в соответствии с расположением контрольной точки предыдущей команды. Если до этого не было команды или предыдущая команда была не Q, q, T или t, то контрольная точка совпадает с текущей точкой.

Нижеследующий пример демонстрирует использование квадратичной кривой Безье.

Квадратичная кривая Безье
Квадратичная кривая Безье

Дуга эллипса

  • Команда: A или a
  • Имя: elliptical arc
  • Параметры: (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
  • Описание: Рисует дугу из текущей точки (x y). Размер и ориентация определяются двумя радиусами (rx, ry) и x-axis-rotation, который указывает, как будет повернут эллипс относительно координатной плоскости. Центр эллипса вычисляется автоматически. large-arc-flag и sweep-flag помогают автоматическому подсчету и прорисовке дуги.

Пример.

Дуга эллипса
Дуга эллипса

Команда A или a рисует сегмент эллипса, который имеет некоторые ограничения

  • дуга начинается из текущей точки;
  • дуга заканчивается в точке (x y);
  • эллипс имеет два радиуса (rx ry);
  • поворот относительно оси x определяется параметром x-axis-rotation

В большинстве случаев существует четыре различные дуги (два эллипса каждый состоит из двух дуг), которые соответствуют этим ограничениям. large-arc-flag и sweep-flag указывают, какая из дуг будет нарисована.

  • large-arc-flag определяет, большая или маленькая дуга будет нарисована. Если large-arc-flag равен 1, то будет нарисована одна из больших дуг. Если он равен 0, то будет нарисована одна из маленьких дуг.
  • Если sweep-flag равен 1, то дуга будет нарисована в сторону роста угла (представьте, что внутри эллипса есть часовая стрелка и если дуга нарисована от начальной точки к конечной по ходу часовой стрелки). Если sweep-flag равен 0, то дуга будет нарисована наоборот, то есть в сторону уменьшения угла.

Пример, в котором знаки вопроса ?,? заменяются последовательно на “0,0” “0,1” “1,0” and “1,1”

Четыре типа дуги
Четыре типа дуги

Leave a Reply