5

<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>

  1. Почему при 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>

  1. при A50,80 получается большой круг ?
1

3 ответа 3

6

По шагам

По этому принципу я сделал эту анимацию

<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 не надо

6
  • <path d="M0,220 A10,70 0,0,1 500,250" /> почему у меня дуга увеличивается я ведь уменьшил число?
    – Leks
    Commented 6 июн. 2020 в 20:24
  • @Leks по факту ты рисуешь два эллипса но один скрывает другой - как бы делает clipPath типа того ..и когда и уменьшаешь то вторая арка отодвигается влево/вправо - и в этом случае ты видишь или большую часть видимого эллипса или меньшую часть в случае увеличения числа - примерное поведение видно на снимке экрана команда A или Arc это вообще самое сложное что есть в SVG трудно объяснить Commented 7 июн. 2020 в 0:22
  • @Leks уменьшать или увеличить для тебя и меня это разные вещи - к примеру - все координаты svg начинаются в верхнего левого угла - и когда ты уменьшаешь то на самом деле ты увеличиваешь - то есть тот самый нижний arc поднимиться на верх то есть так и получится что ты увидешь большую часть хотя саму цифру ту уменьшил но арка поднялась выше Commented 7 июн. 2020 в 0:25
  • @Leks codepen.io/topicstarter/pen/VweLymR - вот в этом примере где два circle - попробуй уменьши у верхнего circle - cx или cy в арке тот же принцип - Commented 7 июн. 2020 в 0:39
  • Вы рисуете path через редактор ?
    – Leks
    Commented 8 июн. 2020 в 4:17
4

Примеры анимации атрибутов Elliptical Arc

  1. Изменение координаты 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>

  1. Изменение sweep-flag 1 - 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>

  1. Изменение угла наклона кривой 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>

4

Немного теории

<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'/>

Имеем:

  1. 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>

  1. 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>

7
  • Elliptical Arc образует 2 эллипса которые накладываются частично друг на друга от настроек зависит какой эллипс (один) увидим так ?
    – Leks
    Commented 28 июн. 2020 в 6:26
  • @Leks вернее не эллипс, а то что от него останется в результате взаимодействия с другим эллипсом Commented 28 июн. 2020 в 6:29
  • На картинке видно что два эллипса частично накладываются друг на друга а как сразу узнать какой ширины и высоты будет занимать частичное наложение ?
    – Leks
    Commented 28 июн. 2020 в 6:36
  • @Leks если точно нужно узнать размеры, то по математическим формулам. Например вот так На практике используется обычно частный случай, когда радиусы равны, это полуокружность A50,50 или окружность с двумя зеркальными дугами Сейчас добавлю в ответ Commented 28 июн. 2020 в 6:43
  • тогда проще просто проверить чем это вычислять :))
    – Leks
    Commented 28 июн. 2020 в 6:47

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.