2种不同的SVG路径动画以错误的方式动画

Question

我不久前开始使用SVG，我无法理解为什么它的工作方式不同。我有几个SVG的，我正试图塑造成另一个。在这个例子中(我只是拿出了困扰我的代码)，我有2个路径对象移动到同一个地方。但一个只是出现和消失，而另一个是沿着路径移动。

我想实现像下面的对象移动动画。分数有问题吗?因为我尝试了一个添加"虚拟点"(相同数量的更多点)来匹配点数的例子，但仍然发生了同样的事情。有没有人能帮我理解为什么会发生这种情况，也许我做错了什么?下面是代码示例:

HTML:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" viewBox="0 0 363 356" xml:space="preserve" enable-background="new 0 0 363 356">
<g id="hi_orb_orange">
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="149.73" y1="104.66" x2="214.4" y2="104.66" gradientTransform="matrix(1.0526 0.3685 -0.3877 1.1076 9.673 -66.0063)">
  <animate attributeName="x1" values="149.73;227.736" dur="3s" repeatCount="indefinite" />
  <animate attributeName="y1" values="104.66;283.898" dur="3s" repeatCount="indefinite" />
  <animate attributeName="x2" values="214.4;301.366" dur="3s" repeatCount="indefinite" />
  <animate attributeName="y2" values="104.66;283.898" dur="3s" repeatCount="indefinite" />
  <stop offset="0.04" class="s7"/>
  <stop offset="1" class="s8"/>
</linearGradient>
<path class="st1" d="M194.8 128.9c-4.2 12-22.8 16.3-41.6 9.7 -18.8-6.6-30.6-21.6-26.5-33.6s22.8-16.3 41.6-9.7C187.1 101.9 199 117 194.8 128.9z">
<animate attributeName="d" values="M194.8 128.9c-4.2 12-22.8 16.3-41.6 9.7 -18.8-6.6-30.6-21.6-26.5-33.6s22.8-16.3 41.6-9.7C187.1 101.9 199 117 194.8 128.9z;
M274.3 193.9c-5.8 16.5-23.5 18.8-40.9 12.8 -17.4-6.1-37.4-37.7-31.6-54.2 5.8-16.5 19.6-17.1 37-11C256.2 147.6 280.1 177.4 274.3 193.9z;
M194.8 128.9c-4.2 12-22.8 16.3-41.6 9.7 -18.8-6.6-30.6-21.6-26.5-33.6s22.8-16.3 41.6-9.7C187.1 101.9 199 117 194.8 128.9z" dur="3s" repeatCount="indefinite"/>
</path>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="88.44" y1="-61.73" x2="153.12" y2="-61.73" gradientTransform="matrix(1.0526 -0.3685 -0.3877 -1.1076 9.673 199.3584)">
  <animate attributeName="x1" values="88.44;227.736;88.44" dur="3s" repeatCount="indefinite" />
  <animate attributeName="y1" values="-61.73;283.898;-61.73" dur="3s" repeatCount="indefinite" />
  <animate attributeName="x2" values="153.12;301.366;153.12" dur="3s" repeatCount="indefinite" />
  <animate attributeName="y2" values="-61.73;283.898;-61.73" dur="3s" repeatCount="indefinite" />
  <stop offset="0.04" class="s7"/>
  <stop offset="1" class="s8"/>
</linearGradient>
<path class="st2" d="M194.8 211.3c-4.2-12-22.8-16.3-41.6-9.7 -18.8 6.6-30.6 21.6-26.5 33.6 4.2 12 22.8 16.3 41.6 9.7C187.1 238.3 199 223.3 194.8 211.3z">
<animate attributeName="d" values="M194.8 211.3c-4.2-12-22.8-16.3-41.6-9.7 -18.8 6.6-30.6 21.6-26.5 33.6 4.2 12 22.8 16.3 41.6 9.7C187.1 238.3 199 223.3 194.8 211.3z;
M274.3 193.9c-5.8 16.5-23.5 18.8-40.9 12.8 -17.4-6.1-37.4-37.7-31.6-54.2 5.8-16.5 19.6-17.1 37-11C256.2 147.6 280.1 177.4 274.3 193.9z;
M194.8 211.3c-4.2-12-22.8-16.3-41.6-9.7 -18.8 6.6-30.6 21.6-26.5 33.6 4.2 12 22.8 16.3 41.6 9.7C187.1 238.3 199 223.3 194.8 211.3z" dur="3s" repeatCount="indefinite"/>
</path>
</g>
</svg>

这里是小提琴…https://jsfiddle.net/16syyazs/

Answer 1

为了动画流畅(即插入)，所有动画必须包含相同数量和类型的动画。

<animate attributeName="d" values="
M194.8 128.9c-4.2 12  -22.8 16.3-41.6 9.7  -18.8-6.6-30.6-21.6-26.5-33.6s22.8-16.3 41.6-9.7C187.1 101.9 199 117 194.8 128.9z;
M274.3 193.9c-5.8 16.5-23.5 18.8-40.9 12.8 -17.4-6.1-37.4-37.7-31.6-54.2 5.8-16.5 19.6-17.1 37-11C256.2 147.6 280.1 177.4 274.3 193.9z;
M194.8 128.9c-4.2 12  -22.8 16.3-41.6 9.7  -18.8-6.6-30.6-21.6-26.5-33.6s22.8-16.3 41.6-9.7C187.1 101.9 199 117 194.8 128.9z" dur="3s" repeatCount="indefinite"/>

如果我把上面的动画对齐，我可以看到顶部和底部的值有一个s，但中间的值没有。可能还有其他类似的问题