SVGをcreateElementNSを使って作成した場合のアニメーション

Question

こんばんは。

SVGアニメーションを勉強しているのですが、情報がたくさんあって、どれが正しいのかが判断しづらくなってしまったので、２点ほど質問させてください。

長いSVGタグをhtml上に書かずに外部から書く場合、アニメーションはできるのでしょうか？

その場合、どのような選択肢（組み合わせ）があるのでしょうか？

よろしくお願いいたします。

Answer 1

まんじゅ（´ん｀）と申します。

長いSVGタグをhtml上に書かずに外部から書く場合、アニメーションはできるのでしょうか？

できます。
具体的に言うと「SVGファイルとしてHTMLとは別に書く」というやり方が無難かと思います。

その場合、どのような選択肢（組み合わせ）があるのでしょうか？

アニメーションをするSVGを作るという観点ですと

• SVGのanimation要素（タグ）やtransform要素で動かす
• SVGファイルの中でJavascriptを記述して動かす（JavascriptとSVGを別のファイルに分けることも可能）
• SVGファイルの中でCSSを記述して動かす（CSSとSVGを別のファイルに分けることも可能）

タイトルのようにJavascriptのcreateElementNSを使って動的にアニメーションを制作した場合でも、SVGの要素は使えると思うのですが__（要確認）__
HTMLのソースコードやJavascriptのソースコードが必要以上に長くなってしまうのではないかと個人的には思います。

なので、「SVGファイルで別に書き、その中でSVGの要素でアニメーションさせる」という方法がよろしいかと思います。

もし既に存じておりましたら恐縮ですが、以下のページが参考になると思います。
svg要素の基本的な使い方まとめ

2016/3/9 20:24 追記

また、拙いですが、自分が全部SVGのWebページを作ろうとして挫折した残骸がGithubにありましたのでそちらも載せておきます。
manzyun/FullSVGWebPage: Full or SVG on HTML web page. It's reserch project.

Comments

[dialbird]

まんじゅ（´ん｀）さん
（素敵な顔文字ですね）

詳細かつお気遣いに溢れた解説をありがとうございます！

おかげさまで無事、htmlからの切り離し、およびアニメーションの実装を行うことができました！

私もいずれこのような丁寧な文章で他人に返答出来るよう、精進させていただきます。

本当にありがとうございました！