| ポイント |
<![CDATA[
s = s * n;
svgObj = document.theSVG.getSVGDocument();
svgObj.getElementById("myText").setAttribute("transform","scale("+s+")");
]]>
|
| 説 明 |
SVG内で拡大縮小する文字のエレメントにidで名前を付けます。付けた名前はgetElementById("名前")で指定します。このエレメントの拡大縮小はsetAttribute("transform",拡大縮小率)で指定します。拡大縮小率ですが、これは数値ではなく「scale(0.5)」のような文字列で渡す必要があります。scale(0.5)では1/2サイズ、scale(2 0.5)では横に2倍、縦に1/2のサイズに変更されます。scale(1)で元のサイズに戻ります。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>拡大縮小させる</title>
<script language="JavaScript"><!--
s = 1;
function setSVGScale(n)
{
s = s * n;
svgObj = document.theSVG.getSVGDocument();
svgObj.getElementById("myText").setAttribute("transform","scale("+s+")");
}
// --></script>
</head>
<body>
<embed src="test.svg" width="320" height="240" name="theSVG"><br>
<form name="myFORM">
<input type="button" value="1.2倍に拡大" onClick="setSVGScale(1.2)"><br>
<input type="button" value="1/2に縮小" onClick="setSVGScale(0.5)"><br>
</form>
</body>
</html>
]]>
|
| 補足説明 |
ここで使用したSVGは以下の通りです。
<![CDATA[
<?xml version="1.0"?>
<svg>
<text id="myText" x="0" y="14">OpenSpace</text>
</svg>
]]> |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
拡大縮小させる