プログラミング

プログラミング

JavascriptでSVGドキュメントを制御する際の注意点とよくある失敗

492 views

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」を参考にしたものです)

関連記事

おすすめ記事