SVGアニメーション

なんだかんだでcanvasに押され気味のSVGだがAnimated SVG Iconsなんかを見ているとSVGにも可能性を感じる。

という事で昨年やった静止画のSVGに続きSVGアニメーションもやってみた。
上記の「Animated SVG Icons」はSnap.svgというAdobe製のライブラリを使っていたがちょっと動かすだけなので直接svgを書いてます。
目は“神衣純潔”なイメージです。
目は数値入力をして作りましたが、眉毛はイラレで作ってエディタで開いてコピペしてます。こういった作り方ができるのはSVGのいいところでもあります。
上から眉毛、目の輪郭のアニメーション、目玉のアニメーション、目玉のマスクのアニメーションとなっています。
問題はモダンなブラウザしか動かない事です。IE11だと眉毛だけになってしまいます。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="figure1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<path fill="#000" d="M28.892,156l14.729-42.108c0,0,137.946-56.473,160.039-61.512s67.868,70.039,67.868,70.039s-39.187-62.287-62.055-57.636
	s-84.036,56.953-111.943,67.806S28.892,156,28.892,156z"/>
<path stroke="#000" stroke-width="5" fill="#FFF">
	<animate attributeName="d" calcMode="linear" from="M50,150 Q120,200 250,130 Q150,200 50,150 Z" to="M50,150 Q120,125 250,130 Q150,250 50,150 Z" keySplines="0.25 0.1 0.25 1.0" begin="0s" dur="0.5s" repeatCount="1" fill="freeze" />
</path>
<g id="eye">
	<clipPath id="eyeball">
		<circle id="clkipShape" cx="100" cy="150" r="45" />
		<animate xlink:href="#clkipShape" attributeType="XML" attributeName="cx" calcMode="spline" from="100" to="150" begin="0.5s" dur="0.5s" repeatCount="1" fill="freeze" keySplines="0.0 0.0 0.58 1.0" />
	</clipPath>
<path clip-path="url(#eyeball)">
	<animate attributeName="d" calcMode="linear" from="M50,150 Q120,200 250,130 Q150,200 50,150 Z" to="M50,150 Q120,125 250,130 Q150,250 50,150 Z" keySplines="0.25 0.1 0.25 1.0" begin="0s" dur="0.5s" repeatCount="1" fill="freeze" />
</path>
</g>
</svg>

参照
Animation SVG Tiny 1.2
svg要素の基本的な使い方まとめ
 「10分でわかるSVG 応用編」サンプル

Tags: SVG