Как при наведении на SVG изменить координаты фигуры?

Question

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

Всем привет, решил углубиться в SVG и стало очень интересно, как при наведении ан SVG фигуру менять её форму.

Есть простая фигура

<svg  viewBox="0 0 172 224">
<path  d="M172,172c-57.333,69.333-114.667,69.333-172,0V0h172V172z"/>
</svg>

По идеи при наведении нужно просто подменить координаты эти координаты

M172,172c-57.333,69.333-114.667,69.333-172,0V0h172V172z

на эти

M172,172C111.242,14.322,54.102,27.128,0,172V0h172V172z

Вопрос решил при помощи библиотеки Snap.svg
ДЕМО: https://jsfiddle.net/RadCor/s95njz35/

1) Но у меня вопрос, можно ли это реализовать как-то без дополнительной библиотеки, просто на jquery при hoover и его потери менять координаты.
2) И можно ли как-то добавить к анимации cubic-bezier(.4,-0.63,.11,1.54) ?

Answer 1

[Петр]

Так укажите 2 элемента path и поместите их в один элемент g
В css добавьте стили.

g:hover .path1, g:not(:hover) .path2{ display: none; }

Comments

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

Интересный вариант, но при таком подходе не получиться сделать красивую анимацию hover перехода