RadCor
@RadCor
Если мой ответ вам помог, отмечайте его решением.

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

Всем привет, решил углубиться в 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) ?
  • Вопрос задан
  • 640 просмотров
Пригласить эксперта
Ответы на вопрос 1
petermzg
@petermzg
Самый лучший программист
Так укажите 2 элемента path и поместите их в один элемент g
В css добавьте стили.
g:hover .path1, g:not(:hover) .path2{ display: none; }
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы