SVG-path

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
Если вы нашли ошибку или неточность, вы можете отредактировать статью с помощью prose.io, а также можно написать мне в комментариях или в Twitter.
Система комментирования от Disqus