SVG path часть 2

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

  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”

3. Дуга элипса – Elliptical Arc (A,a)

Формула Elliptical Arc содержит довольно много параметров, что дает хорошую гибкость для отрисовки дуги элипса, точнее сектора элипса, так как элипс никогда не прорисовывается до конца, до соединения начальной и конечной точки дуги элипса, в отличии от базовой фигуры SVG ellipse.

  • M mx,my – координаты начальной точки дуги элипса
  • A rx,ry – радиусы дуги элипса
  • x-axis-rotation – угол поворота всей дуги элипса относительно оси абцисс
  • large-arc-flag – параметр, отвечающий за вывод большей части дуги, если (=1) или меньшей (=0) части дуги см. рисунок ниже.
  • sweep-flag – отвечает за направление отрисовки дуги из начальной точки в конечную точку. Если sweep-flag=1, то дуга элипса будет отрисована по часовой стрелке. При sweep-flag=0 – против часовой стрелки.
  • x,y – координаты конечной точки дуги элипса
Дуга элипса не будет отрисована, если координаты начальной и конечной точек будут совпадать.

На рисунке из спецификации path видно, что дуга Elliptical Arc получается в результате взаимодействия двух одинаковых элипсов.

Параметры large-arc-flag и sweep-flag

large-arc-flag-ph
Между начальной и конечной точкой дуга может быть отрисована 4 способами: либо короткой дугой против часовой стрелки или по часовой, либо по более длинной дуге против / по часовой стрелке. Конкретный маршрут дуги зависит от комбинации флагов – large-arc-flag,sweep-flag: 0,0 | 0,1 | 1,0 | 1,1 Ниже показаны практические примеры этих вариантов.
b_large_0_sweep_0c_large_0_sweep_1
d_large_1_sweep_0e_large_1_sweep_1

Параметр x-axis-rotation

Отвечает за угол поворота всей дуги элипса относительно оси абцисс. На рисунке ниже показано несколько подпутей в команде (path) с разными значениями (0, 30, 60, 90) в градусах параметра x-axis-rotation.

x-axis-rotation
⇚ SVG path часть 1 SVG path часть 3 ⇛

SVG path часть 2: комментарий

  1. Не совсем понятно как работают параметры rx и ry. Если указаны точки начала и конца отрезка эллипса, то как изменение радиуса по абсциссе повлияет на внешний вид. На деле отрезок меняет вид. Но по непонятным правилам.

Добавить комментарий