Анимация SVG, как сделать плавность?

Question

[Капитан Какао]

В общем долго маялся что бы сделать SVG анимацию без JS. Не просто изменения цвета или размера, а изменение самой SVG фигуры при наведении.

В общем получился такой результат.
https://jsfiddle.net/RadCor/1t55dxvx/
При наведении на треугольник он становиться кругом.
Но во-первых он делает это резко, хотелось бы понять как добавить плавности.
Во-вторых анимация срабатывает при наведении на path, можно ли её запустить при наведении на SVG или вообще при наведении к примеру соседнего div ?

Comments

[Капитан Какао]

Как сделать плавность решил, если кому понадобиться вот:
https://jsfiddle.net/RadCor/1t55dxvx/3/
Остался вопрос о том, как запускать анимацию наводя не на сам path а на соседний элемент или в целом на область SVG

[Cr2ed]

В animate замените values на to

<svg viewBox="0 0 165 164" >
<path id="t" d="M0.076,0.031l164.879,66.951c0.022,0.009,0.028,0.037,0.012,0.054l-91.932,96.929 c-0.016,0.017-0.045,0.012-0.054-0.009L0.034,0.075C0.021,0.048,0.049,0.02,0.076,0.031z" >
 <animate 
    attributeName="d" 
    to="M103.728,42.12L103.728,42.12c29.449,11.958,37.636,49.801,15.764,72.862l0,0 c-22.135,23.338-60.884,16.684-73.965-12.703l0,0C29.009,65.17,66.094,26.838,103.728,42.12z"
    begin="t.mouseover" 
    end="t.mouseout"
    dur="5s"
    fill="freeze"
    />
</path>
</svg>

[Максим]

Cr2ed: не фига же не работает !

[Антон Мудренок]

завязывайте со SMIL, он deprecated, не работает в Edge и скоро вообще не будет работать нигде

[Капитан Какао]

Максим Ленский: да, похоже кроссбраузерно без js это не реализовать.

[Капитан Какао]

Антон Мудренок: зачем де мне такой не рабочий и не перспективный вариант?)

Answer 1

[Максим Тимофеев]

https://jsfiddle.net/wokster/1t55dxvx/4/

Comments

[Капитан Какао]

при наведении анимация срабатывает но потом возвращается в исходное положение при том что курсор ещё на фигуре. Не подходит.

[Максим Тимофеев]

Rad Cor: Вы спросили

как сделать плавность

Я сделал плавность. Теперь Вы хотите, что бы я нас работал?

[Капитан Какао]

Максим Тимофеев: что за бред...
Плавность я и сам сделал, читайте комменты, при том сделал так как нужно, при наведении изменяется в одноу сторону, при потере ховеря обратно.

[Максим Тимофеев]

Rad Cor: Только Вы задали вопрос, я на него ответил. Мне надо было периодически еще проверять не написали ли Вы что-то в комментах?