どのようにして<defs>エレメントや<style>エレメントが、後でさまざまなエレメント用に何度も参照することができる定義を含むことが可能なのか、おわかりになったでしょう。同じようにして、<use>エレメントも、一つのSVGドキュメント中で何度も参照することができるSVGエレメントないしSVGオブジェクトを定義することができます。

SVGは機能の一つとして、W3C DOMスタンダードをサポートしています。つまり、JavaScriptなどの言語を使って、SVGドキュメントのコンテンツをあっという間に操作することができるのです。ブラウザでは、SVGドキュメントのそれぞれ別個の部分は、一つの“tree”の中の“node”になります。JavaScriptを利用すれば、ノードを修正したり、削除したり、ツリー中の位置を変更したり、あるいは、単純に新しいノードを付け加えたりすることができます。これはダイナミックSVGドキュメントを開発するためのキーになるコンセプトです。たとえば次のような、簡単なSVGドキュメントを考えてみましょう。

<svg>
<rect id="box" x="0" y="0" width="145" height="70" style="fill:none"/>
<g id="contents">
<circle cx="10" cy="10" r="50" style="fill:red"/>
<text x="23" y="45">ABC!</text>
</g>
</svg>

ドキュメント・ツリーはここに示された通りです。それぞれの青い点はツリー中の一つのノードを表しています。<g>タグや<text>タグなどのノードは子ノードを含んでいます。そのほかのものは子ノードを含みません。

すでにJavaScriptを利用して、このドキュメント・ツリー内のノードへアクセスする実例をいくつか見てきました。特に、名前付きエレメント用にノード・オブジェクトを引き出すために、ルートSVGオブジェクトのgetElementById()方式を利用しました。また、<text>エレメントのテキスト・ノードを引き出すために、XMLコアDOM方式getFirstChild()を一時的に利用しました。

このチュートリアルでは、ノードを動かしたり、ツリー中に新しいノードを挿入するための、このほかの方式を吟味します。下の実例で、（“ペデスタル”の上に座って）レイヤー付きオブジェクトをクリックし、それぞれのオブジェクトをグループの背後に送ってください。ほら、オブジェクトがドキュメント・ツリーの高所へ移動しました。このようにして、ほかの背後になりました。

下の画像で、“ペデスタル”の上にセットされているレイヤー付きエレメントの上で、マウスをクリックしてみてください。

画像中のオブジェクト上でクリックすると、そのSVGエレメントがトリガーとなって、arrange_me()JavaScript関数を呼び出すonclickイベントが起こります。たとえば、このような具合です。

<use id="zbigx" xlink:href="#bigx_def" onclick="arrange_me(evt)"/>

前にarrange_me() JavaScript関数内で、オブジェクトのノード（イベントのターゲット）とコンテナ・グループ（オブジェクトの親ノード）をいったん引き出すと、２段階でオブジェクトをグループの背後に移動することができます。

1. オブジェクトの親ノードのremoveChild()方式を利用して、オブジェクトをドキュメント・ツリーから取り除きます。

groupnode.removeChild (target);

2. オブジェクトの親ノードのinsertBefore()とgetFirstChild()方式を利用して、オブジェクトを親ノードの最初の子としてドキュメント・ツリーに再び挿入します。

groupnode.insertBefore (target, groupnode.getFirstChild());

同じようなコンセプトで、オブジェクトを前後に移動したり、指定したオブジェクトの前に持ってきたり、あるいは、まったく別のグループに入れたりすることができます。

さて次にSVGドキュメントに新たなエレメントを付け加える方法を一つ検討してみましょう。先ほど上で利用した実例で、画像の下にある黒いアイコンをどれでもいいですから、クリックしてみてください。こうすることによって、空いている場所にそのアイコンのコピーが新たに作成されます。つまり、アイコン・オブジェクトが複製されて、ドキュメント・ツリーに付け加えられたわけです。

さて、アイコンの一つをクリックすると、そのSVGエレメントがトリガーとなって、clone_me()JavaScript関数を呼び出すonclickイベントが始まります。たとえば次のような具合です。

<use id="sun" xlink:href="#sun_def" onclick="clone_me(evt)">

clone_me() JavaScript関数の内部でオブジェクトのノード（イベントのターゲット）を引き出すと、数段階で、オブジェクトの複製を作成し、その複製をSVGドキュメントに付け加えることができます。

1. オブジェクト・ノードのcloneNode()方式を使って、オブジェクトの“clone”を作成します。

var newnode = target.cloneNode(false);

2. 複製されたノードは、そのほかのSVGエレメントと同様に扱うことができます。その属性とスタイル・プロパティーを、たとえば次のように変更します。

newnode.setAttribute ('x', x);
newnode.setAttribute ('y', y);
newnode.getStyle().setProperty ('fill', fill);

3. 最後に、getElementById()方式を利用して、“contents”グループ用のノード・オブジェクトを引き出し、グループのノードのappendNode()方式を使って、複製されたオブジェクトをこのグループに付け加えます。

var contents = svgdoc.getElementById ('contents');
newnode = contents.appendChild (newnode);

もちろん、すでにあるオブジェクトを複製できるというだけではありません。新しいノード・オブジェクトをゼロから作ることもできますし、利用できる方式を用いて、新しいノード・オブジェクトをドキュメント・ツリーに挿入することも可能です。

Workflow: Internationalization