3

http://jsfiddle.net/emanuensis/NNvjA/で単純な SVG フィギュアの SMIL アニメーションを試みましmouseoverた、mouseoutイベントによって決定されます...そしてその場所からさらにmouseovers を待ちます。

残念ながら、(FF と Chrome の両方で) 現実はそうではありません。

ABA (A は任意の数のアップ、B はダウン、または vv) の形式では、2 番目の A に対して noop が返されます。

最初の Afreezes属性の値 最初の値 そのタイプ (アップまたはダウン) の最後のイベント (多くの場合、常に新しく復帰する可能性があります) で達成された値です。つまり、B はその位置から開始 (ホーム) します。

最初のAでもfreezes無添加です。つまり、シャトルの前にすべてのイベントが家に帰ります。

freezeおそらく、効果を短い期間強制する別の方法があります(つまり、最後までではありません。これは方向であり、大きさではありません)。

ここで面倒くさい

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <svg id="svg2"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       width="400" height="500"
       version="1.1">
    <text id="tup" x="48 " y="33" >up  </text>
    <text id="tdn" x="235" y="33" >down</text>
     <rect id="trect" style="fill:yellow;stroke:red;"
             width="20" height="20" x="75" y="0" rx="5" ry="5" >
    <animate id="tr"
       begin="tdn.mouseover"
       end="tdn.mouseout+1s"
       attributeName="x"
       additive="sum"
       fill = "freeze"
       restart = "whenNotActive"
       from=""
       to="50"
       dur="3s"
       repeatCount="1" />
      <animate id="rt"
       begin="tup.mouseover"
       end="tup.mouseout+1s"
       attributeName="x"
       additive="sum"
       fill = "freeze"
       restart = "whenNotActive"
       from=""
       to="250"
       dur="3s"
       repeatCount="1"/>
      </rect>
    </svg>

4

1 に答える 1

3

あなたが望むのは、残念ながら SMIL がどのように機能するかではありません。

追加アニメーションがアクティブまたはフリーズしているときに再開すると、アニメーションの以前の効果 (つまり、再開前) はアトリビュートに適用されなくなります。特に、累積アニメーションは、アニメーションのアクティブな期間内でのみ定義されることに注意してください。アニメーションが再開すると、蓄積されたすべてのコンテキストが破棄され、アニメーション効果 F(t) は、再開されたアクティブな期間の最初の反復から再び蓄積を開始します。

あなたができることは、JavaScriptを使用してアニメーション終了イベントをリッスンし、アニメーション値をベース値にコピーすることです.

于 2014-01-02T01:01:44.757 に答える