SVGによるベクターグラフィック(3) (3/5)

アニメーションというと、つい「なめらかに変化する」というようなものばかりを考えがちですが、そうしたもの以外にも一種のアニメーションともいえる「状態を変化させる」機能も用意されています。これは「set」というタグです。

<set>は、ある特定の状況の際に、指定した属性の値を変更する働きを持ちます。そしてそれを終了する状況になると属性の値はもとに戻されます。これは以下のような形で記述します。

<set attributeType="xm/css" atributeName="名前" to="値" begin="開始状況" end="終了状況" />

attributeType/attributeNameで属性を指定し、toで変更する値を指定します。そしてbeginとendでそれぞれ開始と終了の状況を指定します。「状況」というとわかりにくいですが、例えば表示されてからの経過時間を指定することも出来ますし、さまざまなイベント名を指定することも出来ます。

例として、下のリスト欄に簡単な例をあげておきます。これはマウスポインタが図形の上に来ると青くなり、図形から離れると赤に戻るサンプルです。ここでは、begin="mouseover" end="mouseout" というようにして<set>の開始と終了の設定を行っています。

この<set>タグは、単純に値を変更するだけですので、例えば「マウスポインタが図形上に来ると、赤から青へとなめらかに色が変わる」というようなことはできません。その代わりに、<animate>では変更できないような属性の値も操作することができます。例えば、

<set attributeType="css" attributeName="display"
        to="none" begin="1s" end="3s" />

このようにすると、図形が表示されてから１〜３秒の間、図形が消えます。こうした、数値などで変更できないようなものについても、<set>を使うことで操作することが出来ます。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※<set>による属性変化(1)

<circle id="circle1" cx="100" cy="100" r="75" filter="url(#MyFilter)" 
	fill="red" stroke-width="0px">
	<set attributeType="css" attributeName="fill"
			to="#0000FF" begin="mouseover" end="mouseout" />
</circle>


※<set>による属性変化(2)

<circle id="circle1" cx="100" cy="100" r="75" filter="url(#MyFilter)" 
	fill="red" stroke-width="0px">
	<set attributeType="css" attributeName="display"
			to="none" begin="1s" end="3s" />
</circle>