Да.Ключ заключается в том, что состояние «до» и состояние «после» объекта svg должны иметь одинаковое количество точек.
В вашем векторном редакторе начните с состояния «до», давайте назовем это «Shape A».Экспортируйте форму before и сохраните «точки» в этом svg-коде для Shape A. Теперь вернемся к программе, переместим точки вектора до тех пор, пока они не совпадут с нужной вам формой after, мы назовем состояние after, Shape.B».
Как только вы встретите нужную фигуру, экспортируйте этот svg и вытяните точки пути векторов.Это будет ваша форма B (после состояния).
Теперь у вас должна быть копия точек пути для формы A (состояние до) и формы B (состояние после).
Возьмите эти точки и введите их в начальный путьтег, а также в пределах «значений» для тега animate.См. Шаблон ниже для примера того, как вставить эти точки в тег animate, и посмотрите код фрагмента для более подробной разбивки того, где эти точки вставлены.
<animate dur=”5s” repeatCount=”indefinite” attributeName=”d”
values=”shapeAPoints;shapeBPoints;shapeAPoints”>
После того, как вы вставите свои точки, вы добавите fill, calcMode и keySplines, как показано в примере.Вы можете поиграть с ними, как вы хотите.Надеюсь это поможет!Эта статья помогла мне разобраться https://codeburst.io/svg-morphing-the-easy-way-and-the-hard-way-c117a620b65f
Дайте мне знать, как вы разбираетесь.
Обновление: отредактированный фрагмент для отображения анимации при наведении мыши.Обратите внимание на добавленный атрибут begin , со значением 'thesvg.mouseover'.Он берет идентификатор элемента ('thesvg') и связывает его с событием mouseover. Вы можете присвоить своему телу идентификатор и поменять местами идентификатор thesvg со своим телом.id 'для того же эффекта.Для этого фрагмента использование Body ID не сработало, но я протестировал его в Firefox, и он работает нормально.
#thesvg{
height: 300px;
width: 300px;
}
#thepath{
fill: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<div id="svgcontainer">
<svg id="thesvg" width="100" height="130" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path id="thepath" d="M39.29,39.27,36,45,8,39.27,0,21l8-7L23,5l16.29,9L45,32l-5.71,7.27Z" fill-rule="nonzero" fill="#070707">
<animate id="the-animation" begin="thesvg.mouseover" dur="1s" repeatCount="1" attributeName="d" values=
"M39.29,39.27,36,45,8,39.27,0,21l8-7L23,5l16.29,9L45,32l-5.71,7.27Z;
M39.29,39.27,28,33,8,39.27,14,26,8,14l18,5,13.29-5L34,27l5.29,12.27Z;
M39.29,39.27,36,45,8,39.27,0,21l8-7L23,5l16.29,9L45,32l-5.71,7.27Z;"
fill="freeze"
calcMode="spline"
keySplines="0.4 0 0.2 1; 0.4 0 0.2 1">
</path>
</svg>
</div>
<script src="main.js"></script>
</body>
</html>