back
SVGによるベクターグラフィック(2) (2/5)
■グラフィックの属性を操作する
では、実際にスクリプトからグラフィックを操作してみましょう。グラフィック操作の基本は、「属性の操作」です。SVGのグラフィックタグでは、グラフィックの基本的な性質はすべて属性として用意されていました。ですから、DOMオブジェクトを取得し、その属性を操作することができれば、基本的なグラフィック操作はできるようになるわけです。例えば、
◯値の取得
◯値の変更
これまた非常に簡単ですね。この２つのメソッドだけで、基本的な属性の操作は行えます。これらのメソッドでは、第１引数に属性名を指定しますが、これはSVGグラフィックタグに用意した属性名をそのまま指定します。例えば、<circle>タグの位置ならば'cx'や'cy'、半径は'r'といった名前をそのまま指定すればいいのです。
下のリスト欄に、ごく簡単な属性操作の例を挙げておきました。入力フィールドに数値を記入してボタンをクリックすると、表示されている円の半径がその値に変更されます。実に簡単に図形を操作できることがわかるでしょう。
ここでは<circle>タグの「r」属性を変更して半径を変えていますが、注意して欲しいのは「値の形式」です。例えば、半径であれば、r="50px"となっていますね。r="50"ではありません。実は、SVGグラフィックの属性は、r="50"というように単位を省略して書いても認識します。
この「単位を付けているかどうか」は、実は意外と重要です。例えば、getAttributeで値を取り出し利用する場合、"50"ならば数字として扱えますが、"50px"では使えません。ここから数字の部分だけを取り出すなどしてやらないといけないのです。属性を操作する場合、このへんの「数字＋単位だと値の利用が面倒くさい」ということは頭に入れておきましょう。
<circle id="circle1" ……略…… />このように、id属性を用意してグラフィックタグを用意しておけば、このグラフィックのDOMオブジェクトは以下のようにして取り出すことができます。
変数 = document.getElementById("circle1");実にシンプルですね。後は、取り出したオブジェクトの属性を操作するだけです。属性操作は、取得したSVGグラフィックのDOMオブジェクトに用意されている以下のようなメソッドで行えます。◯値の取得
変数 = オブジェクト.getAttribute( 属性名 );
◯値の変更
オブジェクト.setAttribute( 属性名 , 値 );
これまた非常に簡単ですね。この２つのメソッドだけで、基本的な属性の操作は行えます。これらのメソッドでは、第１引数に属性名を指定しますが、これはSVGグラフィックタグに用意した属性名をそのまま指定します。例えば、<circle>タグの位置ならば'cx'や'cy'、半径は'r'といった名前をそのまま指定すればいいのです。
下のリスト欄に、ごく簡単な属性操作の例を挙げておきました。入力フィールドに数値を記入してボタンをクリックすると、表示されている円の半径がその値に変更されます。実に簡単に図形を操作できることがわかるでしょう。
ここでは<circle>タグの「r」属性を変更して半径を変えていますが、注意して欲しいのは「値の形式」です。例えば、半径であれば、r="50px"となっていますね。r="50"ではありません。実は、SVGグラフィックの属性は、r="50"というように単位を省略して書いても認識します。
この「単位を付けているかどうか」は、実は意外と重要です。例えば、getAttributeで値を取り出し利用する場合、"50"ならば数字として扱えますが、"50px"では使えません。ここから数字の部分だけを取り出すなどしてやらないといけないのです。属性を操作する場合、このへんの「数字＋単位だと値の利用が面倒くさい」ということは頭に入れておきましょう。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<title>サンプルページ</title>
<script type="text/javascript">
function doAction(){
var txt1 = document.getElementById('text1');
var circle1 = document.getElementById('circle1');
circle1.setAttribute('r',txt1.value);
}
</script>
</head>
<body>
<p>SVGのサンプル</p>
<svg width="300px" height="300px"
xmlns="http://www.w3.org/2000/svg">
<circle id="circle1" cx="150px" cy="150px" r="50px"
fill="#FF6666" stroke="#FF0000" stroke-width="5px" />
</svg>
<input type="text" id="text1" value="50" />
<input type="button" value="click" onclick="doAction();" />
</body>
</html>
| << 前へ | 次へ >> |