back
SVGによるベクターグラフィック(2) (4/5)
■オブジェクトの生成
続いて、スクリプトを使ってグラフィックを生成する、ということをやってみましょう。HTMLの場合、document.createElementというメソッドを使って簡単にDOMオブジェクトを生成し、それをHTML内に組み込むことができます。
SVGでも、これと同じようなことができます。が、オブジェクト生成の方法が微妙に違っているので注意が必要です。
<svg>タグを見ると、xmlns="http://www.w3.org/2000/svg"という属性が書いてありますね。これは「XMLにおける名前空間は"http://www.w3.org/2000/svg"というものですよ」ということを指定しているのです。XMLベースのさまざまな技術は、いろいろなところで使われており、それぞれでさまざまなタグが定義されてます。そこでこんな具合に「◯◯というところで定義されているオブジェクトを使う」というように、名前空間とセットでオブジェクトの生成などを行うようになっているのですね。
オブジェクトが作成できたら、後は普通のDOMオブジェクトと同様に属性などを設定し、画面に組み込みます。このとき、注意しておきたいのは、<svg>タグの中に組み込む、ということでしょう。グラフィック関係はすべて<svg>内に書かれますから。
では、下のリスト欄に簡単なサンプルを挙げておきます。ここでは淡いブルーの部分をクリックすると、その地点に青い円が追加されます。基本的には、既にわかっているような処理のはずですが、ちょっと注意しておきたいのが「属性の設定」です。これ、実は２種類あるのです。
◯SVGグラフィック固有の属性
◯汎用的な属性
見ればわかるように、グラフィックの種類ごとに用意されている属性（ここではcx, cy, rなど）は、setAttributeメソッドを使って個々に値を設定します。が、汎用的な属性（ここではfill, stroke, stroke-width）は、「style」でまとめて設定されています。setAttribute('fill','#6666FF')ではないのです。この点を間違えないようにしてください。
SVGでも、これと同じようなことができます。が、オブジェクト生成の方法が微妙に違っているので注意が必要です。
変数 = document.createElementNS( 名前空間 , タグ名 );SVGグラフィックを作成する場合、メソッドは「createElementNS」というものを使います。これは名前空間を指定してDOMオブジェクトを生成するためのものです。要するに、「普通のHTMLとはちょっと違うところで定義されているものを利用するのに、それが定義されているところを指定して作るようになっているメソッド」と考えるとよいでしょう。
<svg>タグを見ると、xmlns="http://www.w3.org/2000/svg"という属性が書いてありますね。これは「XMLにおける名前空間は"http://www.w3.org/2000/svg"というものですよ」ということを指定しているのです。XMLベースのさまざまな技術は、いろいろなところで使われており、それぞれでさまざまなタグが定義されてます。そこでこんな具合に「◯◯というところで定義されているオブジェクトを使う」というように、名前空間とセットでオブジェクトの生成などを行うようになっているのですね。
オブジェクトが作成できたら、後は普通のDOMオブジェクトと同様に属性などを設定し、画面に組み込みます。このとき、注意しておきたいのは、<svg>タグの中に組み込む、ということでしょう。グラフィック関係はすべて<svg>内に書かれますから。
では、下のリスト欄に簡単なサンプルを挙げておきます。ここでは淡いブルーの部分をクリックすると、その地点に青い円が追加されます。基本的には、既にわかっているような処理のはずですが、ちょっと注意しておきたいのが「属性の設定」です。これ、実は２種類あるのです。
◯SVGグラフィック固有の属性
newobj.setAttribute('cx',x);
newobj.setAttribute('cy',y);
newobj.setAttribute('r',r);◯汎用的な属性
newobj.setAttribute('style','fill:#6666FF;stroke:0000FF;stroke-width:10;');見ればわかるように、グラフィックの種類ごとに用意されている属性（ここではcx, cy, rなど）は、setAttributeメソッドを使って個々に値を設定します。が、汎用的な属性（ここではfill, stroke, stroke-width）は、「style」でまとめて設定されています。setAttribute('fill','#6666FF')ではないのです。この点を間違えないようにしてください。
document.getElementById("svg").appendChild(newobj);諸設定が完了したら、<svg>タグにオブジェクトを追加します。オブジェクトの追加は、「appendChild」メソッドを利用します。これはJavaScriptのDOMオブジェクトでも登場しますから使い方はわかりますね。(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"
id="svg" xmlns="http://www.w3.org/2000/svg">
<script type="text/javascript">
<![CDATA[
var svgns = 'http://www.w3.org/2000/svg';
function doClick(event){
var x = event.x;
var y = event.y;
var r = 50;
var newobj = document.createElementNS(svgns, 'circle');
newobj.setAttribute('cx',x);
newobj.setAttribute('cy',y);
newobj.setAttribute('r',r);
newobj.setAttribute('style','fill:#6666FF;stroke:0000FF;stroke-width:10;');
document.getElementById("svg").appendChild(newobj);
}
]]>
</script>
<rect x="0" y="0" width="300" height="300"
fill="#F0F0FF" onclick="doClick(event);" />
<circle id="circle1" cx="100" cy="75" r="50"
fill="#FF6666" stroke="#FF0000" stroke-width="5px" />
</svg>
| << 前へ | 次へ >> |