Какое влияние на форму дуги оказывают атрибуты Elliptical Arc
<svg width='1700' height='500' style='border:1px solid black' viewBox='0 0 400 400'>
<path d='M30,50 A100,80 10 0 0 150,50'/>
</svg>- Почему при A100,80 получается маленький круг
<svg width='1700' height='500' style='border:1px solid black' viewBox='0 0 400 400'>
<path d='M30,50 A50,80 10 0 0 150,50'/>
</svg>- при A50,80 получается большой круг ?
Ответы (3 шт):
По шагам
По этому принципу я сделал эту анимацию
<svg viewBox="-10 -10 520 520" width="500">
<defs>
<style>
path {
fill: none;
stroke: red;
stroke-width: 2;
}
</style>
</defs>
<path d="M0,100 A200,300 0,0,1 250,100 M0,100 A200,150 0,0,0 250,100">
<animate attributeName="d" dur="3s" values="M0,100 A200,330 0,0,1 250,100 M0,100 A200,200 0,0,0 250,100;
M0,100 A200,300 0,0,1 250,100 M0,100 A200,200 0,0,0 250,100;
M0,100 A200,300 0,0,1 250,100 M0,100 A200,150 0,0,0 250,100" begin="0s" repeatCount="indefinite" />
</path>
<g transform="translate(0,10)">
<circle cx="130" cy="80" r="40" fill="red" />
<circle cx="130" cy="80" r="16" fill="darkred" />
<circle cx="130" cy="80" r="6" fill="red" />
<animateTransform attributeName="transform" type="translate" values="-20 4; -10 2; 0 2; 10 2; 20 4" dur="10s" repeatCount="indefinite" />
</g>
</svg>Арка начинается всегда с команды M то есть установить перо в координаты
Я для примера выбрал viewBox в котором будет легко считать
Начало арки будет здесь : M0,250 а конец арки будет здесь A100,100
Все остальные команды лишние но расскажу и о них тоже
В арке семь (7) команд и каждая выполняет свою роль
Про начало и конец арки я уже рассказал дальше 6, 7 это диаметр и диаметр/2 это если речь именно о том как нарисовать круг на path
Первый пример
<svg viewBox="-10 -10 520 520" width="500">
<defs>
<style>
path{
fill: none;
stroke: red;
stroke-width: 2;
}
</style>
</defs>
<path d="M0,250 A100,100 0,0,1 500,250" />
<path d="M0,250 A100,100 0,0,0 500,250" />
</svg>Для того что бы не было двух path а был один мы объеденим их вот так
<path d="M0,250 A100,100 0,0,1 500,250 M0,250 A100,100 0,0,0 500,250" />
Если разбирать ещё подробнее то из A или точнее самой этой командой обычно делают чарты ...
3 и 4 позицией ни когда не пользовался
5 позиция в A это по какому направлению рисовать арку по часовой или против часовой - всего два значения 0 или 1
И кстати когда пишут руками две арки таким образом то закрывать path не надо
Немного теории
<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 взаимосвязаны, поэтому увеличение одного параметра, например радиусов может, как увеличивать, так и уменьшать результирующую дугу. Всё зависит и от других параметров тоже.
Примеры анимации атрибутов Elliptical Arc
- Изменение координаты
Mxстартовой точки дуги
values="
M25,200 A50,80 0 1 1 180,200;
M100,200 A50,80 0 1 1 180,200"
<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'>
<animate attributeName="d"
dur="6s"
calcMode="linear"
values="
M25,200 A50,80 0 1 1 180,200;
M100,200 A50,80 0 1 1 180,200"
fill="freeze"
repeatCount="1" />
</path>
</svg>- Изменение
sweep-flag1 - 0дуга сначала рисуется по часовой =1, затем против часовой стрелки =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 1 1 150,50'>
<animate attributeName="d"
dur="2s"
calcMode="discrete"
values="
M100,200 A50,80 10 1 1 180,200;
M100,200 A50,80 10 1 0 180,200"
fill="freeze"
repeatCount="indefinite" />
</path>
</svg>3.
values=" M100,200 A50,80 10 0 0 180,200; M100,200 A50,80 10 1 1 180,200"
<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'>
<animate attributeName="d"
dur="2s"
calcMode="discrete"
values="
M100,200 A50,80 10 0 0 180,200;
M100,200 A50,80 10 1 1 180,200"
fill="freeze"
repeatCount="indefinite" />
</path>
</svg>- Изменение угла наклона кривой x-axis-rotation.
Значение в градусах можно менять линейно
<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'>
<animate attributeName="d"
dur="6s"
calcMode="linear"
values="
M100,200 A50,80 0 1 1 180,200;
M100,200 A50,80 360 1 1 180,200;
M100,200 A50,80 360 1 1 180,200;
M100,200 A50,80 0 1 1 180,200;
M100,200 A50,80 0 1 1 180,200"
fill="freeze"
repeatCount="indefinite" />
</path>
</svg>