SVG-path

Содержание:
M, moveto
Z, closepath
L, lineto
H, horizontal lineto
V, vertical lineto
C, curveto
S, smooth curveto
Q, quadratic Bézier curveto
T, smooth quadratic Bézier curveto
A, elliptical arc

path — более сложный вариант линии. С его помощью можно нарисовать line, polyline, polygon, circle и rect:

В отличие от polygon, фигура не замыкается сама по себе, но это можно сделать с помощью дополнительного параметра.

Пример фигуры с path:

<svg class="svg" width="150" height="130">
  <symbol id="s-crown">
    <path d="M 10,110 L 10,10 L 40,50 L 70,10 L 100,50 L 130,10 L 130,110 z"
    fill="gold" stroke="orange" stroke-width="5"/>
  </symbol>

  <use xlink:href="#s-crown" x="5" y="7"/>
</svg>

Точки фигуры задаются в атрибуте d. В значении содержатся команды, управляющие направлением и видом линий. Координаты x и y можно разделять запятой или пробелом, но запятая наглядней.

Все команды обозначаются одной буквой, и могут быть записаны в верхнем или нижнем регистре. Верхний регистр обозначает использование абсолютных координат, нижний — относительных.

Примеры ниже демонстрируют разницу между абсолютными и относительными координатами. Различие состоит во второй строке: M 20,20 L 100,150 vs m 20,20 l 100,150.

Команды в нижнем регистре ( m и l) указывают отсчитывать координаты не от верхнего левого угла полотна, а от текущей точки (пример справа):

<svg width="200" height="200">
  <path
    stroke="crimson"
    stroke-width="2"
    d="M 20,20 L 80,50
    M 20,20 L 100,150"/>
</svg>
<svg width="200" height="200">
  <path
    stroke="skyblue"
    stroke-width="2"
    d="M 20,20 L 80,50
    m 20,20 l 100,150"/>
</svg>

Команды:

M, m

Mmoveto, обозначает начало новой линии — точку, с которой мы начинаем рисовать.

Параметры: x,y.

Команд M в строке может быть несколько, каждая из них будет обозначать начало новой линии:

<svg width="200" height="170">
  <path stroke="orange" stroke-width="3"
    d="M 20,20 L150,150
       M 50,20 L180,150"/>
</svg>

Z, z

Zclosepath — замкнуть фигуру, при этом рисуется линия от текущей точки до начальной. Действие этой команды не зависит от регистра, Z и z сработают одинаково.

Параметры: нет.

Z избавляет от необходимости указывать последнюю точку с координатами первой, чтобы закончить фигуру. Кроме того, если замыкать фигуру вручную, может получиться неаккуратный стык:

<svg width="200" height="180">
  <path stroke="orange" stroke-width="10" fill="gold"
    d="M 100,20 L 180,160
       L 20,160 L 100,20"/>
</svg>

Вместо последней точки используем Z и получаем аккуратно замкнутую фигуру:

<svg width="200" height="180">
  <path stroke="orange" stroke-width="10" fill="gold"
    d="M 100,20 L 180,160
       L 20,160 z"/>
</svg>

L, l

Llineto — рисование линии.

Параметры: x,y.

Следует отметить, что писать L перед каждой точкой не обязательно:

L 80,20 L 20,100 = L 80,20 20,100

Строчки сработают одинаково, но с L удобнее, если код предполагается читать.

<svg width="200" height="180">
  <path stroke="green" stroke-width="3" fill="none"
    d="M 20,50
       L 80,20 20,100 150,50 50,150 150,120
       "/>
</svg>

H, h

Hhorizontal lineto — рисование горизонтальной линии.

Параметры: x.

V, v

Vvertical lineto — рисование вертикальной линии.

Параметры: y.

С помощью этих команд очень удобно рисовать прямоугольные фигуры:

<svg width="200" height="200">
  <path stroke="lightseagreen" stroke-width="5" fill="turquoise"
    d="M 20,20
       h 160 v 160 h -80 v -80 h -80 z
       "/>
</svg>

Помимо команд для рисования прямых линий, есть несколько команд для рисования кривых. Они достаточно интересные, хотя и несколько сложнее для понимания.

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

C, c

Ccurveto

Параметры: x1 y1 x2 y2 x y

Абсолютные координаты

C 150,20 150,150 20,150

Относительные координаты

c 150,20 150,150 20,150

S, s

Ssmooth curveto

Параметры: x2 y2 x y

Абсолютные координаты

S 180,100 20,180

Относительные координаты

s 180,100 20,180

Q, q

Qquadratic Bézier curveto

Параметры: x1 y1 x y

Абсолютные координаты

Q 180,100 20,180

Относительные координаты

q 180,100 20,180

T, t

Tsmooth quadratic Bézier curveto

Параметры: x1 y1 x y

Абсолютные координаты

T 60,100 180,20

Относительные координаты

t 60,100 180,20

A, a

Aelliptical arc

Параметры: rx ry x-axis-rotation large-arc-flag sweep-flag x y

Абсолютные координаты

A20,35 0 0,0 170,2

Относительные координаты

a20,35 0 0,0 170,20

Чтобы получить более полное представление о работе этих функций читайте спецификацию.

Ссылки по теме:
Paths
SVG: группировка и переиспользование элементовSVG: заливка и обводка
Наверх