SVGアニメーションをパターンで繰り返す

October 14th, 2012

SVG画像は繰り返しパターンを定義して大きさに応じて繰り返すことができます。

<pattern id="dots" width="100" height="100" patternUnits="userSpaceOnUse">
	<circle r="20" cx="25" cy="25" fill="white"/>
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill="url(#dots)"/>


あと要素をアニメーションさせたりできるんで面白いですね。

<circle r="20" cx="25" cy="25" fill="white">
	<animate attributeName="r" dur="6s" values="10;30;10" repeatCount="indefinite"/>
</circle>


これを組み合わせて、パターンをアニメーションさせることもできます。
ただそれを作るときは、パターンの中に上下左右の繰り返し部分を入れておかないと、途切れたように見えてしまうことがあります。

[続きを読む]