| ポイント |
<![CDATA[
document.theSVG.getSVGDocument().getElementById("myCIRCLE").setAttribute("r",n);
]]>
|
| 説 明 |
SVG内で半径を変更する円にidで名前を付けます。付けた名前はgetElementById("名前")で指定します。これでオブジェクトの属性をsetAttributeを使って属性名と設定値を指定します。半径はsetAttribute("r",半径)のように指定します。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>円の半径を変更する</title>
<script language="JavaScript"><!--
function setSVGCircle()
{
n = document.myFORM.myR.value;
document.theSVG.getSVGDocument().getElementById("myCIRCLE").setAttribute("r",n);
}
// --></script>
</head>
<body>
<embed src="test.svg" width="320" height="240" name="theSVG"><br>
<form name="myFORM">
半径<input type="text" NAME="myR">
<input type="button" value="設定" onClick="setSVGCircle()">
</form>
</body>
</html>
]]>
|
| 補足説明 |
ここで使用したSVGは以下の通りです。
<![CDATA[
<?xml version="1.0"?>
<svg>
<circle id="myCIRCLE" style="fill:#FFE0AF;" cx="160" cy="120" r="100"/>
</svg>
]]> |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
円の半径を変更する