Нарисовать круг в svg

Question

Кто может нарисовать круг под размеры viewBox="0 0 36 36", простой круг. Ни эллипсом, а под тег path.

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

Вообще не понимаю как в Inkscape, выполнить это. Одни эллипсы...

Answer 1

Задача понятна - перевод окружности из тега circle в идентичную окружность с помощью тега path. Это действительно важно, так как анимации, например animateMotion - движение объекта вдоль пути, работают только с path

Вообще не понимаю как в Inkscape, выполнить это. Одни эллипсы.

#1. Установить в <ellipse cx="18" cy="18" rx="15" ry="15"> и эллипс превращается при равенстве радиусов - в окружность. (Но это комментарий для общего понятия)

#2. С помощью векторного редактора Чтобы получить идеальную окружность по форме нужно выполнить следующие шаги

Написать svg с требуемыми параметрами, в частности viewBox="0 0 36 36"

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

Загрузить этот файл в векторный редактор

В верхнем меню выбрать: контур / оконтурить объект Shift+Ctrl+C
Сохранить файл в формате - *.svg и скопировать path

d="M 33,18 A 15,15 0 0 1 18,33 15,15 0 0 1 3,18 15,15 0 0 1 18,3 15,15 0 0 1 33,18 Z"

Ниже готовый результат:

.container {
width:30vw;
heigh:30vh;
}

<div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 36 36" >  
 <path fill="none" stroke="black" d="M 33,18 A 15,15 0 0 1 18,33 15,15 0 0 1 3,18 15,15 0 0 1 18,3 15,15 0 0 1 33,18 Z" /> 
</svg>  
</div>

UPDATE

Это действительно важно, так как анимации, например animateMotion - движение объекта вдоль пути, работают только с path

Решил в качестве бонуса добавить пример анимации движения шарика вдоль круговой трассы id="trace"

.container {
width:30vw;
heigh:30vh;
}

<div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 36 36" >  
 <path id="trace" fill="none" stroke="black" d="M 33,18 A 15,15 0 0 1 18,33 15,15 0 0 1 3,18 15,15 0 0 1 18,3 15,15 0 0 1 33,18 Z" /> 
 <circle cx="" cy="" r="2" fill="red">
   
        <animateMotion id="myanim" dur="6s" begin="0; myanim.end+1s" fill="freeze">
           <mpath xlink:href="#trace"/>
        </animateMotion>
    </circle>
</svg>  
</div>

БЛОГ НА HUSL

Нарисовать круг в svg

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

UPDATE