SVGのアニメーション手段とその選び方 - Qiita

SVGアニメーションの手段 HTMLに組み込んだSVGをアニメーションさせる方法は以下の3つ。 CSS JavaScript HTML - SVG element 結論から言うとCSSかJavaScriptのどっちかを使うべき。 CSSでアニメーションできる範囲ならCSS、それ以上したいならJS。ブラウザ対応は考慮してない。 CSS CSSからSVGの各プロパティの値を変更する。さわれる属性は限られているがシンプルに実装しやすい。 制御範囲はSVGのプレゼンテーション属性と呼ばれる属性に限られる。(プレゼンテーション属性一覧: https://www.w3.org/TR/SVG/propidx.html) 正直一覧を見てもピンとこないので以下に例を示す。 できることの例 SVGの線や塗りのRGBAを変更する 線の幅やスタイル(破線とか点線とか)を変える シェイプが筆跡に沿って徐々に現れる的

[dhrname]

SIEでIE11とEdgeにおいてSMILアニメーション要素全てをサポートさせたので、よろしければ、お使いください　http://d.hatena.ne.jp/dhrname/20160824　>SVG要素の一つであるanimateタグ