Немного теории
<path d='M30,50 A100,80 10 0 0 150,50'/>
Это формула path
называется - Дуга элипса – Elliptical Arc (A,a)
Каждый параметр выполняет своё назначение:
M mx,my – координаты начальной точки дуги эллипса
A rx,ry – радиусы дуги эллипса
x-axis-rotation – угол поворота всей дуги эллипса относительно оси абцисс. В примере 10 градусов.
large-arc-flag – параметр, отвечающий за вывод бОльшей части дуги, если flag =1
или меньшей части дуги при flag=0
см. рисунок ниже.
sweep-flag – отвечает за направление отрисовки дуги из начальной точки в конечную точку. Если sweep-flag=1
, то дуга эллипса будет отрисована по часовой стрелке
. При sweep-flag=0
– против часовой стрелки.
x,y – координаты конечной точки дуги эллипса
На рисунке из спецификации W3C path видно, что дуга Elliptical Arc получается в результате взаимодействия двух одинаковых эллипсов.
Для формулы <path d='M30,50 A100,80 10 0 0 150,50'/>
Имеем:
large-arc-flag = 0
- рисуется меньшая часть дуги от точки Arc start
до точки Arc end
sweep-flag= 0
- отрисовка малой дуги идёт против часовой стрелки
Это первый фрагмент рисунка (вверху слева)
<svg width='400' height='400' style='border:1px solid black' viewBox='0 0 400 400'>
<path fill="gold" stroke="red" d='M30,50 A100,80 10 0 0 150,50'/>
</svg>
large-arc-flag = 1
- рисуется бОльшая часть дуги от точки Arc start
до точки Arc end
sweep-flag= 1
- отрисовка бОльшой дуги идёт по часовой стрелки
(нижний, правый фрагмент рисунка)
<svg width='400' height='400' style='border:1px solid black' viewBox='0 0 400 400'>
<path fill="gold" stroke="red" d='M30,50 A100,80 10 1 1 150,50'/>
</svg>
Все параметры формулы Elliptical Arc взаимосвязаны, поэтому увеличение одного параметра, например радиусов может, как увеличивать, так и уменьшать результирующую дугу. Всё зависит и от других параметров тоже.
UPDATE
На практике широкое распространение получил частный случай Eliptical Arc, когда радиусы равны, допустим 50px - A50,50
так как при использовании circle, в качестве трассы движения анимированного объекта, не работает аnimateMotion
Этот вид анимации работает только с трассой нарисованной path
Поэтому берутся две дуги, которые зеркальны, образуя тем самым полный круг.
Одна дуга рисуется по часовой стрелке sweep-flag = 1
<svg width='400' height='400' style='border:1px solid black' viewBox='0 0 400 400'>
<path fill="gold" stroke="red" d='M110,150 A50,50 10 1 1 210,150'/>
</svg>
зеркальная дуга против часовой стрелки sweep-flag = 0
<svg width='400' height='400' style='border:1px solid black' viewBox='0 0 400 400'>
<path fill="gold" stroke="red" d='M110,150 A50,50 10 1 0 210,150'/>
</svg>
Обе дуги вместе:
<svg width='400' height='400' style='border:1px solid black' viewBox='0 0 400 400'>
<path fill="gold" stroke="red"
d='
M110,150 A50,50 10 1 1 210,150
M110,150 A50,50 10 1 0 210,150'/>
</svg>