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

Question

我不久前开始使用 SVG，我无法理解为什么它的工作方式不同。我有几个 SVG，我正在尝试将一个变成另一个。在这个例子中（我刚刚取出困扰我的代码）我有 2 个路径对象移动到同一个位置。但是一个只是出现和消失，而另一个正在沿着路径移动。

我想实现如下图的移动动画。点数有问题吗？因为我尝试了一个添加 "virtual points"（具有相同数字的更多点）以匹配点数的示例，但仍然发生同样的事情。任何人都可以帮助我理解为什么会发生这种情况，并且可以阐明我做错了什么吗？这是代码示例：

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>

这里是 fiddle...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，但中间的没有。可能还有其他类似的问题。

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

2 different SVG path animations animate in the wrong way

html

xml

svg

path

jquery-animate