Примеры и код команд:
- Начальная точка (M,m) и отрезок прямой (L,l)
- Горизонтальная линия (H,h) и вертикальная (V,v)
- Дуга элипса – Elliptical Arc (A,a)
- Кубическая кривая Безье – The cubic Bézier curve
- Гладкая поликривая Безье – Smooth cubic poly Bezier curve
- Кривые Безье второго порядка – Quadratic Bezier Curves
- Гладкая поликривая Безье второго порядка – Smooth Quadratic poly Bezier
- Правила и команды заполнения путей – 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) |
1 2 |
<path d="M50,200 Q175,75 300,200" style="stroke:blue; stroke-width:4; fill:none;"/> |
7. Гладкая поликривая Безье второго порядка – Smooth Quadratic poly Bezier curve
Для получения poly Bezier кривой второго порядка к конечной точке первой кривой присоединяется начальная точка второй кривой. В этом случае координаты начальной точки второй кривой не указываются.
1 2 |
<path d="M50,200 Q175,75 300,200 Q425,75 550,200" style="stroke:blue; stroke-width:4; fill:none;"/> |
Для гарантированного получения гладкого, без изломов соединения двух кривых применяется команда – (T) или (t) (для относительных координат).
1 2 |
<path d="M50,200 Q175,75 300,200 T 550,200" style="stroke:blue; stroke-width:4; fill:none;"/> |
В этом случае после команды (T) указываются координаты только финальной точки присоединенной кривой.
Так как координаты контрольной точки последней кривой вычисляются автоматически зеркальным отражением контрольной точки первой кривой.