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

「Snap.svg」を利用した SVGモーフィングアニメーションのサンプルです。
クリックで変化します。再クリックでもとに戻ります。（★連続したループアニメーションはこちら）

HTMLと JavaScriptです。

<svg id="star" 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 pathFrom = '最初のパス（d=' 'の中身です）';
var pathTo = '変形後のパス（d=' 'の中身です）';

var s = Snap('#star');
var path = s.path(pathFrom).attr({fill:'#fdd35c'});
var isdir = false;
s.click(function () {  //クリックでアニメーション開始
	if (!isdir) {path.animate({path:pathTo, fill:'#ec6d74'}, 1000, mina.bounce);
    isdir = true;
    } else {  //再クリックで元に戻すアニメーション開始
        path.animate({path:pathFrom, fill:'#fdd35c'}, 1000, mina.bounce);
        isdir = false;
        }
});
</script>