5

ドットを白から赤に、次に白から赤にフェードさせようとしています。

これは私がこれまでに持っているものです：

<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485"/>
<animate id="testies" attributeName="fill" from="#ED1C24" 
to="#fff" xlink:href="#test" dur="2s" fill="freeze" />
<animate attributeName="fill" from="" to="#ED1C24"
xlink:href="#test" begin="" onrepeat=" dur="2s" fill="freeze" />

最初のアニメーションが終了したときに2番目のアニメーションを開始したいのですが、これが可能であることはわかっていますが、理解できません。

4

1 に答える 1

8

あなたの例を使用すると、次のようになります。

<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485"/>
<animate id="testies" attributeName="fill" from="#ED1C24" to="#fff"
  xlink:href="#test" dur="2s" fill="freeze" />  
<animate attributeName="fill" from="" to="#ED1C24" xlink:href="#test"
  begin="testies.end" dur="2s" fill="freeze" />

xlink:hrefまたは、構文なしの同等の代替手段として:

<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485">
  <animate id="testies" attributeName="fill" from="#ED1C24" to="#fff"
    dur="2s" fill="freeze" />  
  <animate attributeName="fill" from="" to="#ED1C24"
    begin="testies.end" dur="2s" fill="freeze" />
</circle>

したがって、基本的には、他のアニメーションをトリガーする要素の ID を追加し、「.end」サフィックスを追加するだけです。アニメーションの開始時にトリガーする「.begin」を指定したり、時間オフセットを追加したりすることもできますbegin="someId.end+2s"。

イベントを使用してアニメーションをトリガーすることもできます。構文は似ています: id の後にドット、イベントの名前、オプションで時間オフセットが続きます。ここで、SVG 1.1 で必要なイベントのリストを参照してください(「イベント名」とラベル付けされた一番左の列がここに適用されます)。

仕様が怖くない場合は、すべての詳細についてbegin 属性の完全な構文を参照してください。

于 2011-01-24T07:40:40.203 に答える