svg4

注意
css style='transform:translate(100px,100px);rotate:(30deg);'
CSSアニメは、図形のstyleを回転移動するが、
svgアニメはinnerHTMLで毎回消去し(連続コマ送り)、座標軸を移動したり
回転したりする。 svg transform='translate(100,100) rotate(30,150,150)' /
よって、軸回転が先で移動すると、連続コマ送り螺旋移動になってしまう。


svgの移動と拡大縮小 .... svg transform='translate(100,100) scale(3,3)' /
svgの拡大縮小と移動 .... svg transform='scale(3,3) translate(100,100)' /...移動も3倍に注意。


svg要素の基本的な使い方まとめ　 http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_04.htm

---

SMIL アニメーション ( Chrome OK )
https://developer.mozilla.org/ja/docs/Web/SVG/SVG_animation_with_SMIL
IE11/Edgeでは非対応で、SMILは使えない。
Chrome 45 BetaからSMILアニメーションが非推奨となる。(2015.8)