SVGドキュメントにJavascriptでアクションの埋め込みをおこなう際の注意点と失敗の解決法を解説

JavascriptをSVGにアニメーションをつけたり、クリックできるアクション性を持たせたり、描画や修正のために使っている開発者の方は多いと思います。しかしSVGドキュメントの内部にJavascriptを使用する際、少し注意が必要となります。

 

SVGドキュメントの内部でJavascriptを使う時の5つの注意点

【注意点1】

Javascriptは「<svg>」タグの内側であればSVGドキュメントのどこにでも設置することが可能です。ですが一般的に言って、スクリプトはドキュメントの最後部に置かれるべきです。というのも、DOMへのアクセスをブロックされるのを防ぎ、アクセスできるようにするためです。

 

【注意点2】

ほとんどの教科書にてMIMEタイプ (<script type=”text/javascript”>や<script type=”application/ecmascript”>など)で宣言することが教えられていますが、これは必ずしも必要ではありません。Javascriptはブラウザデフォルトですし、SVGの制御に関してもわざわざ宣言する必要はないのです。

 

【注意点3】

同様に、多くの教科書でSVGドキュメント内のJavascriptを「[CDATA[」で囲うことが教えられています。

 

 

というのも、ブラウザは時々SVGドキュメント内のJavascriptをXTMLとして読み込んでしまうという、致命的なプロセスの混乱を来たすことがあります。そのため「CDATA」でスクリプトを守る必要があったのですが、現在のブラウザではこれは必要ありません。

 

しかしスクリプトを守る観点から、この「CDATA」で囲っておくのが最も安全な方法です。

 

【注意点4】

外部のスクリプトを参照することができますが、その時は下記のように「xlink」を使いましょう。

 

【注意点5】

 

SVGはあくまでXTMLであり、HTMLではありません。そのためDOMに関連するいくつかの方法はHTMLのようには動きません（応急措置の方法はいくつかあります）。

 

その一方で、Javascriptは多くのケースでHTMLドキュメントに設置された時と同じように動きます。例えば、idや要素を参照できるように。ここでひとつ特記事項があるとすれば、大文字と小文字を区別した名前空間を作ることですが、これは別の機会にしましょう。

 

 

よくある失敗と解決方法

SVGドキュメントの内部に埋め込むJavascriptで、最もよくある失敗はJavascriptを無視してSVGが画像として表示されることです。例えば下記のように。

上記のような場合は、Javascriptが無視されるでしょう。

 

これを解決する方法は2つあります。

 

1.画像として参照するよりも、SVGをページに埋め込む

 

2.SVGを<object>か<iframe> としてHTML内に参照する

 

上記のどちらの方法でも、SVGを制御するJavascriptはうまく反映されるはずです。

 

 

 

（※本稿は「Using JavaScript in SVG」を参考にしたものです）