| ポイント |
<![CDATA[
svgObj = document.theSVG.getSVGDocument();
svgObj.getElementById("myRect").setAttribute("width",w);
svgObj.getElementById("myRect").setAttribute("height",h);
]]>
|
| 説 明 |
SVG内で大きさを変更する長方形にidで名前を付けます。付けた名前はgetElementById("名前")で指定します。これでオブジェクトの属性をsetAttribute()を使って属性名と設定値を指定します。属性名はwidth、heightで、それぞれ横サイズ、縦サイズとなっています。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>長方形の大きさを変更する</title>
<script language="JavaScript"><!--
function setSVGRectSize(w,h)
{
svgObj = document.theSVG.getSVGDocument();
svgObj.getElementById("myRect").setAttribute("width",w);
svgObj.getElementById("myRect").setAttribute("height",h);
}
// --></script>
</head>
<body>
<embed src="test.svg" width="320" height="240" name="theSVG"><br>
<a href="javaScript:setSVGRectSize(100,40)">サイズ変更（小）</a><br>
<a href="javaScript:setSVGRectSize(320,240)">サイズ変更（大）</a><br>
</body>
</html>
]]>
|
| 補足説明 |
ここで使用したSVGは以下の通りです。
<![CDATA[
<?xml version="1.0"?>
<svg>
<rect id="myRect" x="1" y="1" width="320" height="240" rx="10" ry="10" color="red" />
</svg>
]]> |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
長方形の大きさを変更する