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

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”

4. Кубическая кривая Безье – The cubic Bezier curve

• M mx,my – координаты начальной точки кубической кривой Безье
• x1,y1 – координаты первой контрольной точки
• x2,y2 – координаты второй контрольной точки
• x,y – координаты финальной точки кривой Безье

Примеры кубических кривых Безье.

(Две пары координат, которые идут после команды – C)

5. Гладкая поликривая Безье – Smooth cubic poly Bezier curve

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

При взаимодействии контрольных точек двух соседних кривых Безье соединение может получиться не совсем гладким, под острым углом.
Для гарантированного, гладкого (smooth) соединения двух кривых Безье применяется командаS.
В этом случае в написании формулы параметра путиd=”…” отбрасывается не только начальная точка второй кривой, но и координаты первой контрольной точки. На рисунке эта виртуальная контрольная точка изображена красной прерывистой линией.
Другими словами, для присоединяемой кривой указываются координаты только двух точек: последней контрольной и финальной точки кривой.

⇚ SVG path часть 2 SVG path часть 4 ⇛