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">
 <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">
   <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"/>
   <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"/>
  </path>
</svg>

很遗憾，我无法计算节点数。原则上我知道路径元素是如何工作的。例如。 according to MDN m 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">
 <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">
   <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"/>
   <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"/>
  </path>
</svg>

svg morphing SMIL 动画立即从一种状态跳转到另一种状态

svg morphing SMIL animation immediately jumps from one state to another

animation

svg

smil