SVGによるベクターグラフィック(2) (1/5)

SVGのグラフィックは、JavaScriptの世界では「DOMオブジェクト」として扱われます。つまり、普通のHTMLで操作するのとほぼ同じ感覚で扱うことができる、ということです。では、やってみましょう。

まずは、SVGファイルとして用意した場合のグラフィック操作についてです。SVGファイルは、XMLベースで記述されています。したがって、スクリプトもXMLの文法に従って用意しなければいけません。スクリプトのタグは、以下のような形で<svg>タグ内に用意することになります。

<script type="text/javascript">
    <![CDATA[
    ……ここにスクリプトを書く……
    ]]>
</script>

<script>タグを使って記述する点はHTMLと同様ですが、XMLの場合、その中に直接スクリプトを書いたり、おなじみの<!-- -->コメントタグを使って書くことはできません。XML内にデータを記述祭に用いられる、<![CDATA[ ]]>というタグを使わなければいけません。まぁ、これはXHTMLでも同じなので、既にXHTMLに慣れている人には違和感ないかも知れませんね。

一方、インラインSVGを使う場合は、これは通常のHTMLにおけるスクリプトとまったく何ら違いはありません。ですから、改めて「スクリプトの記述の仕方」を説明する必要もないでしょう。

下に、ごく単純なスクリプト実行の例を挙げておきましょう。SVGファイルにこのように記述をし、それをHTMLファイルに埋め込んで表示すると、画面にアラートが現れます。ごく初歩的なものですが、スクリプトがちゃんと機能していることがわかるでしょう。

ただし、SVGファイルを埋め込む場合、注意すべきは「HTML側には触れない」という点です。SVGファイルの中に記述されたスクリプトからは、埋め込まれるHTMLファイルにあるHTML要素にはアクセス出来ません。扱えるのは、あくまでSVGファイル内に記述されているグラフィック要素だけです。

あくまで「グラフィックの操作」のみが必要であるならSVGファイルとして記述する方式は、グラフィック部分を切り離して整理でき便利ですが、HTMLの要素と連携してスクリプトを動かすような場合はインラインSVGを使わなければいけない、と考えておきましょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300px" height="300px" style="position:absolute"
		xmlns="http://www.w3.org/2000/svg">
	<script type="text/javascript">
		<![CDATA[ alert("動いてますよ〜"); ]]>
	</script>
	<g fill="red" stroke="blue" stroke-width="2px">
		<rect id="rect1" x="50px" y="50px" width="100px" height="100px" />
		</g>
</svg>