Выровнять анимационную иконку, относительно холста
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 198 350" width="350px" height="198px" style="background: #ab9c9c;">
<circle xmlns="http://www.w3.org/2000/svg" cx="77" cy="80.5" fill="none" stroke="#ff0000" stroke-width="25" r="120" stroke-dasharray="270">
<animateTransform keyTimes="0;1" values="0 77 80.5;360 77 80.5" dur="1s" repeatCount="indefinite" type="rotate" attributeName="transform"/>
</circle>
</svg>Никак не выходит сделать по центру, через браузер меняю параметры, кривая анимация, так и так. А через Inkscape, анимация пропадает...
Ответы (2 шт):
У вас окружность располагается не по центру холста
Должно быть вот так:
После корректировки параметров окружности и анимации центра вращения:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 350 200" width="350px" height="200px" style="background: #ab9c9c;">
<circle xmlns="http://www.w3.org/2000/svg" cx="175" cy="100" fill="none" stroke="#ff0000" stroke-width="25" r="75" stroke-dasharray="270">
<animateTransform keyTimes="0;1" values="0 175 100;360 175 100" dur="1s" repeatCount="indefinite" type="rotate" attributeName="transform"/>
</circle>
</svg>Вариант анимации
Вращение дуги + анимация изменения величин пробелов
и черточек.
При радиусе 25 px длина всей окружности равна 471.
<animate attributeName="stroke-dasharray" dur="2s" values="30, 441; 441,30;30,441" repeatCount="indefinite" /> , где
30 - начальная длина черты
441 - длина пробела
Обратите внимание:
30 + 441 = 471 - сумма длин черты и пробела равна длине всей окружности
При анимации длина черты увеличивается, а пробел уменьшается
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 350 200" width="350px" height="200px" style="background: #ab9c9c;">
<circle class="crc" xmlns="http://www.w3.org/2000/svg" cx="175" cy="100" fill="none" stroke="#ff0000" stroke-width="25" r="75" stroke-dasharray="471" stroke-dashoffset="471" >
<animateTransform keyTimes="0;1" values="0 175 100;360 175 100" dur="1s" repeatCount="indefinite" type="rotate" attributeName="transform"/>
<animate attributeName="stroke-dasharray" dur="2s" values="30, 441; 441,30;30,441" repeatCount="indefinite" />
</circle>
</svg>Update
Ещё примеры анимации:
- Вращение loader с последующим симметричным уменьшением сторон из одной точки.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 350 200" width="350px" height="200px" style="background: #fff;">
<circle class="crc" xmlns="http://www.w3.org/2000/svg" cx="175" cy="100" fill="none" stroke="dodgerblue" stroke-width="25" r="75" stroke-dasharray="471" stroke-dashoffset="471" >
<animateTransform keyTimes="0;1" values="0 175 100;360 175 100" dur="2s" repeatCount="indefinite" type="rotate" attributeName="transform"/>
<animate attributeName="stroke-dasharray" dur="2s" values="0, 471; 471,0;0,471" repeatCount="indefinite" />
</circle>
</svg>Секрет такого решения в значении аргумента:
values="0, 471; 471,0;0,471"
- Нижнее размыкание loader из одной точки:
В значение -values="0, 471; 471,0;0,471;471,0"
добавлена, по сравнению с вариантом. 1, ещё одна пара параметров атрибута stroke-dashoffset - 471,0
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 350 200" width="350px" height="200px" style="background: #fff;">
<circle class="crc" xmlns="http://www.w3.org/2000/svg" cx="175" cy="100" fill="none" stroke="dodgerblue" stroke-width="25" r="75" stroke-dasharray="471" stroke-dashoffset="471" >
<animateTransform keyTimes="0;1" values="0 175 100;360 175 100" dur="2s" repeatCount="indefinite" type="rotate" attributeName="transform"/>
<animate attributeName="stroke-dasharray" dur="2s" values="0, 471; 471,0;0,471;471,0" repeatCount="indefinite" />
</circle>
</svg>