Как изменить радиус в svg коде?

Question

[KitKat]

Нужно поменять радиус анимации, чтобы она была по квадрату (при нажатии), думаю, это просто, но я в svg не бум бум)
codepen.io/anon/pen/alHJB
Помогите, пожалуйста!

Answer 1

[Павел Китьян]

А попробуйте добавить в элемент path трансформацию:

<svg class="progress-circle" width="70" height="70"><path d="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z" transform="scale(0.5) translate(35,35)"/>

Надо только будет еще соответственно поправить толщину линии окгружности, поскольку scale её уменьшает. Для этого можно поправить CSS в вашем примере:

.progress-button svg.progress-circle path {
	stroke: #1ECD97;
	stroke-width: 10;
}

Comments

[KitKat]

@bookworm вы меня не так поняли, нужна анимация по квадрату, а не по окружности, как бы, как в css, border-radius уменьшить, но как в svg я вообще не знаю...