Question

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

第一次运作良好;所以mouseover Anim1会发生火灾，mouseleave Anim2会发生火灾。但是它只会在鼠标悬停时触发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＆amp; endElement，结果相同。

感谢您的光临..

Answer 1

当其他动画开始时，您需要使用end属性来完成相反的动画。

SVG动画不会重新启动动画

1 个答案: