Содержание

SVG Path

Переведено с MozDev

Bootstrap :

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none" />
    ...
</svg>

Разница между большими и маленькими буквами

Если буква большая M 10 10 - то считать надо от позиции 0 0
Если буква маленькая m 10 -10 - то считать надо от текущей позиции

Функции d :

Операция Маска Действия Параметры
Move To M %x %y Переместить курсор на int %x = позиция X
int %y = позиция Y
Line To L %x %y Нарисовать линию до int %x = позиция X
int %y = позиция Y
Horizontal Line H %x Нарисовать горизонтальную до int %x = позиция X
Vertical Line V %y Нарисовать вертикальную до int %y = позиция Y
Close Path Z Окончить Path, обычно выставляется в конце
Cubic Beziers C %x1 %y1, %x2 %y2, %x %y Кривая линия int %x %y = конечная точка (Select anchor points)
int %x1 %y1 = Тянущая линия ОТ (Adjustment points)
int %x2 %y2 = Тянущая линия ДО (Adjustment handle)
bezier-curve.jpg
Several Bezier S %x2 %y2, %x %y Продолжает Cubic Beziers int %x %y = конечная точка (Select anchor points)
int %x2 %y2 = Тянущая линия ДО (Adjustment handle) 
<path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
Quadratic Curve Q %x1 %y1, %x %y Квадратное закругление int %x %y = конечная точка
int %x1 %y1 = Тянущая линия
quadratic_bezier_with_grid.png
Multiple Quadratic Beziers T %x %y Продолжение квадратного закругления (Линия продолжиться отрицательно квадратному закруглению) int %x %y = конечная точка 
<path d="M 10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
Arcs A %rx %ry %x-axis-rotation %large-arc-flag %sweep-flag %x %y Рисует дугообразные линии FIXME