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

【问题标题】：svg morphing SMIL animation immediately jumps from one state to anothersvg morphing SMIL 动画立即从一种状态跳转到另一种状态
【发布时间】：2016-12-24 01:29:07
【问题描述】：

我即将编写一个 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>

很遗憾，我无法计算节点数。原则上我知道路径元素是如何工作的。例如。根据MDN m dx dy 是移动命令，它移动到某个位置并生成一个新点而不连接到旧点。但是m 5,18.1 0,0 7.5,8.9 0,0 12.5,-15.7 0,0 应该是什么意思？

由于明显缺乏知识，我不得不相信 Inkscape，它说每个形状有 17 个节点：

浏览器不做正确动画的原因是什么？我需要改变什么？

【问题讨论】：

标签： animation svg smil

【解决方案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>

【讨论】：