0

パス要素に 2 つの 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たが、同じ結果が得られました。

見てくれてありがとう..

4

1 に答える 1

0

end他のアニメーションが開始されたときに反対のアニメーションを終了するには、属性を使用する必要があります。

于 2014-01-23T22:30:38.510 に答える