Как проще отрисовать круг через SVG?

Question

Paths в SVG - универсальный и мощный инструмент. Но вот отрисовать в нем такую фигуру как круг - задача не такая и простая. Казалось бы есть A (Arc), но я лично смог нарисовать круг только с помощью двух дуг. При этом центр круга нигде не указан, он лежит по середине конечных точек этих дуг. Для контроля добавил белую линию.

<svg width="600" height="200" xmlns="http://www.w3.org/2000/svg">
    <path d="M40 100 A 50 50 0 0 1 140 100
                     A 50 50 0 0 1 40 100"
       stroke="black" fill="rgb(180,180,255)"/>        
    <line x1="40" y1="100" x2="140" y2="100" stroke="white"/>
</svg>

Можно нарисовать круг с помощью двух кубических Безье. Примерно круг в моем случае))

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
    <path d="M40 100 C 40 34 140 34 140 100
                     C 140 166 40 166 40 100"
       stroke="black" fill="rgb(180,180,255)"/>        
    <line x1="40" y1="100" x2="140" y2="100" stroke="white"/>
</svg>

Есть ли способ нарисовать круг проще именно с помощью строки path, так чтобы она состояла из одной кривой?

Answer 1

Согласен с комментарием от @Alexey Ten

Нет, или я такого не знаю. Две дуги это самое простое и понятное из того что я видел

Ответил бы точно так же.
Мотивация вопроса понятна, так как animateMotion, например не работает с circle, а только с path, реализующий форму круга.

Не знаю, будет ли проще решение с помощью векторного редактора

Итак по шагам:

В векторном редакторе, наример Inkscape выбираем в боковом меню инструмент - рисовать круги, эллипсы и удерживая shift рисуете из центра круг. Сохраняете файл и копируете формулу path

Но, вам никогда не удастся нарисовать идеальный круг, он будет иметь, хоть немного форму эллипса с разными rx и ry

Другой способ

Пишите файл svg с нужными координатами центра и размером радиуса окружности

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="300" height="300" viewBox="0 0 300 300" >  
    <circle cx="150" cy="150" r="100" fill="none" stroke="black" />  
</svg>

Загружаете этот файл в векторный редактор и выбираете в верхнем меню
Контур / Оконтурить объект - Shift + Ctrl + C
Сохраняете файл в формате SVG, копируете path

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
  <path fill="none" stroke="black" stroke-width="2" d="M150 50C95 50 50 95 50 150 50 205 95 251 150 251 205 251 251 205 251 150 251 95 205 50 150 50zM150 51C205 51 250 95 250 150 250 205 205 250 150 250 95 250 51 205 51 150 51 95 95 51 150 51z"/>
</svg>

Answer 2

Никак не отрисовывается круг если в качестве конечной точки указать начальную. Но можно немного сместить)) В данном случае 60 --> 60.00001 и все работает. Можно одной дугой нарисовать круг.

Так как незамкнутая фигура все равно заливается, то результат почти идеальный, глазу не различимый точно. Возможные негативные последствия незамкнутого круга можно нивелировать инструкцией замыкания z в конце строки пути. На отображение не повлияет, зато в векторных редакторах, наверняка, будет нормально заливаться цветом (без идеально замкнутого контура были бы ошибки заливки).

Для лучшего понимания отметил начало дуги (и почти конец ее же) красной точкой.

<svg width="600" height="200" xmlns="http://www.w3.org/2000/svg">
    <path d="M60 110 A 50 50 0 1 1 60.00001 110 z"
       stroke="black" fill="rgb(180,180,255)"/> 
    <circle cx="60" cy="110" r="3" fill="red"/>
</svg>

БЛОГ НА HUSL

Как проще отрисовать круг через SVG?

Ответы (2 шт):

Не знаю, будет ли проще решение с помощью векторного редактора