svg - SVG 动画不会重新触发动画

Question

我有两个 SVG 动画附加到路径元素。我想将鼠标悬停并Anim1开火，然后鼠标悬停并Anim2开火，我希望这是可重复的。我正在使用begin=X.mouseover,begin=X.mouseleave和fill="freeze".

它第一次运行良好；所以 mouseoverAnim1起火， mouseleaveAnim2起火。但是它只会Anim1在鼠标悬停时触发并且Anim2永远不会再次触发（或者至少我看不到它做任何动画）。

动画是我正在为属性设置动画的路径d。我在 Chrome 和 Opera 中尝试过，结果相同。

<path class="js-sector-rollover" id="sector1" x="400" y="431" fill="#7a596a" stroke="#3a596a" d="REMOVED">
    <animate id="animOut" attributeName="d" begin="sector1.mouseover" dur="1.2s"
             from="REMOVED" calcMode="spline" keySplines="0.25 0.1 0.25 1" 
             keyTimes="0;1" fill="freeze" restart="whenNotActive"></animate>
    <animate id="animIn" attributeName="d" begin="sector1.mouseout" dur="1.2s"
             from="REMOVED" calcMode="spline" keySplines="0.25 0.1 0.25 1" 
             keyTimes="0;1" fill="freeze" restart="whenNotActive"></animate>
</path>

我已从代码块中删除了实际路径，以使其更易于阅读。

我也尝试过使用beginElement& endElement，结果相同。

谢谢你看..

Answer 1

end当另一个动画开始时，您需要使用该属性来完成相反的动画。