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

Question

[Петр]

Добрый день.
Вопрос заключается в том как сделать плавный переход или почему в моем примере переход не происходит плавно.

В свое время уже был ответ Анимация SVG, как сделать плавность?
Сделал как там + пробовал через @keyframes все тщетно.

Ниже приведен мой пример.

<svg viewBox="0 0 100.7 229.7">
		<path class="st0" d="M41,12h21c0,0-13,25-12,60s13.7,43.5,14,72c0.4,40.7-12.5,76.5-12.5,76.5s7.1-33.7,2.3-75.1C50.7,117.7,37,105,35,71S41,12,41,12z">
			<animate 
			attributeName="d"
			from="M41,12h21c0,0-13,25-12,60s13.7,43.5,14,72c0.4,40.7-12.5,76.5-12.5,76.5s7.1-33.7,2.3-75.1C50.7,117.7,37,105,35,71S41,12,41,12z"
			to="M57.7,12h-21c0,0,13,25,12,60s-13.7,43.5-14,72c-0.4,40.7,12.5,76.5,12.5,76.5s-7.1-33.7-2.3-75.1C48,117.7,61.7,105,63.7,71C65.7,37,57.7,12,57.7,12z" 
			begin="mouseover" 
			end="mouseout"
			dur="3s" 
			/>
		</path>
		</svg>

Answer 1

[NaN]

Вам нужно изменить путь, то есть конкретно как будет изменяться ваша фигура, сейчас она отображается горизонтально, длительность(dur) здесь не играет роли.

Comments

[NaN]

Посмотрите как делают более сложные примеры

[Петр]

То есть вы предлагаете, разбить раскадровку на несколько этапов?

[NaN]

Петр, да сейчас получается, что у вас задана начальная и конечная точка и они совершенно разные. Нужно разбить.

[NaN]

Петр, есть неплохой сервис, может поможет https://app.svgator.com/

[Петр]

NaN, спасибо за информацию, буду разбираться.

[Петр]

NaN, еще вопрос, если вы не против на примере который я показал выше. Там не меняются основные точки. Вопрос как же реализовано тут https://codepen.io/felixhornoiu/pen/dovub Я подстовляю свой вариант и снова все переход жесткий.

Answer 2

[demaxx]

Из Хабра:
Чтобы морфинг сработал, количество команд должно совпадать, и они должны быть одного типа. Если проигнорировать это условие, то интерполяция будет отсутствовать – анимация будет скакать от одного состояния к другому.