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

我即将编写一个SMIL动画，该动画应该从一个路径变形到另一个路径。路径由Inkscape创建。尽管两种形状都由17个节点组成（根据Inkscape），但SMIL动画并不完美。定义1秒后，它从一个路径跳转到另一个路径，而不改变它之间的路径。（将鼠标悬停在框的边框）以另外，它也闪烁在Chrome中（但不是在Firefox）svg morphing SMIL动画立即从一个状态跳转到另一个状态

<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个节点，每个形状：

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

来源

2016-12-24 Scindix

似乎在两条路径中有相同数量的节点是不够的。他们也有相同的类型。（线路与贝塞尔曲线）

这里是一个工作示例：

<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>

来源

2016-12-24 03:58:48 Scindix

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

回答

相关问题