SVGサンプル4-2：ほんっとにはじめてのHTML5とCSS3

「Snap.svg」を利用した SVGモーフィングアニメーションのサンプル。
連続したループアニメーションです。（★クリックによるアニメーションの発生はこちら）

HTMLと JavaScriptです。

<svg id="star-ani" version="1.1" xmlns="http://www.w3.org/2000/svg" width="240px" height="240px"></svg>
<script src="js/snap.svg-min.js"></script>
<script>
var pathOne = '最初のパス（d=' 'の中身です）';
var pathTwo = '変形後のパス（d=' 'の中身です）';

var $svg = Snap('#star-ani');
var $pth = $svg.path(pathOne).attr({fill:'#b8ec6f'});
var isdir = false;

function AnimationSvg() {  //アニメーションの指定
	if (!isdir) {$pth.animate({path:pathTwo, fill:'#6f9fec'}, 1000, mina.easeout, AnimationSvg);
	isdir = true;
	} else {
		$pth.animate({path:pathOne, fill:'#b8ec6f'}, 1000, mina.easeout, AnimationSvg);
		isdir = false;
		}
}
AnimationSvg();  //アニメーション開始
</script>