svg morphing анимация SMIL сразу переходит из одного состояния в другое

Question

Я собираюсь написать анимацию SMIL, которая должна переходить от одного пути к другому. Пути создаются Inkscape. Хотя обе формы состоят из 17 узлов (согласно Inkscape), анимация SMIL не совсем работает. Через определенную 1 секунду он перепрыгивает прямо с одного пути на другой, не изменяя путь между ним. (Наведите указатель мыши на границу окна) Дополнительно к тому, что он также мерцает в Chrome (но не в Firefox)

<svg width="34" height="34" version="1.1" viewBox="0 0 34 34" style="margin:2px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
\t <path id="check" d="m 5,8.25 0,17.5 C 5,27 6.25,27 6.25,27 l 17.5,0 c 0,0 1.25,0 1.25,-1.25 L 25,8.25 C 25,7 23.75,7 23.75,7 L 12.976695,7 6.25,7 C 6.25,7 5,7 5,8.25 Z M 2.5,2 l 25,0 c 0,0 2.5,0 2.5,2.5 l 0,25 C 30,32 27.5,32 27.5,32 l -25,0 C 2.5,32 0,32 0,29.5 L 0,4.5 C 0,2 2.5,2 2.5,2 Z" id="boxUid"> 
 
\t \t \t <animate attributeName="d" to="m 5,18.1 0,0 7.5,8.9 0,0 12.5,-15.7 0,0 L 23.4,7 12.5,20.8 7,14.5 Z M 2.5,2 l 25,0 c 0,0 2.5,0 2.5,2.5 l 0,25 C 30,32 27.5,32 27.5,32 l -25,0 C 2.5,32 0,32 0,29.5 L 0,4.5 C 0,2 2.5,2 2.5,2 Z" dur="1s" fill="freeze" begin="check.mouseenter"/> 
 
\t \t \t <animate attributeName="d" to="m 5,8.25 0,17.5 C 5,27 6.25,27 6.25,27 l 17.5,0 c 0,0 1.25,0 1.25,-1.25 L 25,8.25 C 25,7 23.75,7 23.75,7 L 12.976695,7 6.25,7 C 6.25,7 5,7 5,8.25 Z M 2.5,2 l 25,0 c 0,0 2.5,0 2.5,2.5 l 0,25 C 30,32 27.5,32 27.5,32 l -25,0 C 2.5,32 0,32 0,29.5 L 0,4.5 C 0,2 2.5,2 2.5,2 Z" dur="1s" fill="freeze" begin="check.mouseleave"/> 
 
\t \t </path> 
 
</svg>

К сожалению, я не могу рассчитывать узлы. В принципе, я знаю, как работает элемент пути. Например. согласно MDNm dx dy - это команда перемещения, которая перемещается в определенную позицию и генерирует новую точку, не подключая ее к старой. Но что означает m 5,18.1 0,0 7.5,8.9 0,0 12.5,-15.7 0,0?

Из-за явного недостатка знаний я должен доверять Inkscape, который говорит, что есть 17 узлов в каждой форме:

Что является причиной браузеры не делают правильную анимацию? Что мне нужно изменить?

Answer 1

Кажется, что того же количества узлов в двух путях недостаточно. Они также должны быть одного типа. (Линии против кривых Безье)

Вот рабочий пример:

<svg width="34" height="34" version="1.1" viewBox="0 0 34 34" style="margin:2px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
\t <path id="check" d="m 5,8.25 0,17.5 C 5,27 6.25,27 6.25,27 l 17.5,0 c 0,0 1.25,0 1.25,-1.25 L 25,8.25 C 25,7 23.75,7 23.75,7 L 12.976695,7 6.25,7 C 6.25,7 5,7 5,8.25 Z M 2.5,2 l 25,0 c 0,0 2.5,0 2.5,2.5 l 0,25 C 30,32 27.5,32 27.5,32 l -25,0 C 2.5,32 0,32 0,29.5 L 0,4.5 C 0,2 2.5,2 2.5,2 Z" id="boxUid"> 
 
\t \t \t <animate attributeName="d" to="m 5,18.1 7.347853,8.719452 C 12.5,27 12.5,27 12.5,27 L 24.897509,11.428728 c 0,0 0,0 0.0587,-0.07373 L 25,11.3 C 24.2,9.15 23.4,7 23.4,7 L 12.5,20.8 7,14.5 c 0,0 -1,1.8 -2,3.6 z M 2.5,2 l 25,0 c 0,0 2.5,0 2.5,2.5 l 0,25 C 30,32 27.5,32 27.5,32 l -25,0 C 2.5,32 0,32 0,29.5 L 0,4.5 C 0,2 2.5,2 2.5,2 Z" dur="0.3s" fill="freeze" begin="check.mouseenter"/> 
 
\t \t \t <animate attributeName="d" to="m 5,8.25 0,17.5 C 5,27 6.25,27 6.25,27 l 17.5,0 c 0,0 1.25,0 1.25,-1.25 L 25,8.25 C 25,7 23.75,7 23.75,7 L 12.976695,7 6.25,7 C 6.25,7 5,7 5,8.25 Z M 2.5,2 l 25,0 c 0,0 2.5,0 2.5,2.5 l 0,25 C 30,32 27.5,32 27.5,32 l -25,0 C 2.5,32 0,32 0,29.5 L 0,4.5 C 0,2 2.5,2 2.5,2 Z" dur="0.3s" fill="freeze" begin="check.mouseleave"/> 
 
\t \t </path> 
 
</svg>