トップページ >  HTML5 >  svg要素(8)　その他
初版2011/08/08： 最終更新日2011/08/08
svg要素(8)　その他
目次
・アニメーション
・SVGに関する文献
アニメーション

<svg>要素には、アニメーションを定義する<animate >要素が存在します。

リスト1. アニメーションの例

<circle id="aniCir" cx="0" cy="200" r="1" fill="yellow">
	<animate attributeName="cx" attributeType="XML"
			 begin="0s" dur="30s" fill="freeze" from="0" to="250" />
	<animate attributeName="cy" attributeType="XML"
			 begin="0s" dur="30s" fill="freeze" from="200" to="50" />
	<animate attributeName="r" attributeType="XML"
			 begin="0s" dur="30s" fill="freeze" from="1" to="100" />
	<animate attributeName="cx" attributeType="XML"
			 begin="30s" dur="30s" fill="freeze" from="250" to="500" />
	<animate attributeName="cy" attributeType="XML"
			 begin="30s" dur="30s" fill="freeze" from="50" to="200" />
	<animate attributeName="r" attributeType="XML"
			 begin="30s" dur="30s" fill="freeze" from="100" to="1" />
	<animate attributeName="fill" attributeType="XML"
			 begin="0s" dur="60s" from="yellow" to="red" />
</circle>

コーディング例

アニメーションの要素には<set>要素、<animateMotion> 要素、<animateColor>要素、<animateTransform>要素などを用いてより複雑なアニメーションを作ることができます。

SVGに関する文献

<svg>要素の仕様は、「W3C SVG Working Group」を基本としています。
最新のバージョンは「SVG 2.0」ですが、「SVG 1.1」に関しては日本語化も進められています。
「スケーラブル ベクター グラフィックス (SVG) 1.1 仕様の日本語訳」

HOME