Примеры и код команд:

1. Начальная точка (M,m) и отрезок прямой (L,l)
2. Горизонтальная линия (H,h) и вертикальная (V,v)
3. Дуга элипса – Elliptical Arc (A,a)
4. Кубическая кривая Безье – The cubic Bézier curve
5. Гладкая поликривая Безье – Smooth cubic poly Bezier curve
6. Кривые Безье второго порядка – Quadratic Bezier Curves
7. Гладкая поликривая Безье второго порядка – Smooth Quadratic poly Bezier
8. Правила и команды заполнения путей – fill-rule=”nonzero | evenodd”

6. Кривые Безье второго порядка – Quadratic Bezier Curves

Кривые Безье второго порядка похожи на кубические, но они имеют только одну контрольную точку. Что облегчает процесс создания кривых, с помощью написания кода вручную без использования векторных редакторов.

Команда	Описание	Параметры
Q / q ( quadratic Bezier curve )	Отрисовка квадратичной кривой Безье от начальной точки (mx,my) до конечной (x,y) с контрольной точкой (x1,y1)	(mx,my) (x1,y1) (x,y)
T / t ( shorthand/ smooth quadratic Bezier Curve )	Рисование квадратичной кривой Безье от текущей точки до заданной (x,y). Контрольная точка этой команды представляет собой отражение контрольной точки предыдущей команды.	(x,y)

7. Гладкая поликривая Безье второго порядка – Smooth Quadratic poly Bezier curve

Для получения poly Bezier кривой второго порядка к конечной точке первой кривой присоединяется начальная точка второй кривой. В этом случае координаты начальной точки второй кривой не указываются.

Для гарантированного получения гладкого, без изломов соединения двух кривых применяется команда – (T) или (t) (для относительных координат).

В этом случае после команды (T) указываются координаты только финальной точки присоединенной кривой.
Так как координаты контрольной точки последней кривой вычисляются автоматически зеркальным отражением контрольной точки первой кривой.

⇚ SVG path часть 3 SVG path часть 5 ⇛