| ポイント |
<![CDATA[
svgObj = document.theSVG.getSVGDocument();
txt = svgObj.getElementById(sName).getFirstChild().getData();
document.myFORM.result.value = txt;
]]>
|
| 説 明 |
SVG内で内容を変更する文字のエレメントにidで名前を付けます。付けた名前はgetElementById("名前")で指定します。このエレメント内のノードのデータはgetData()で読み出すことができます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>SVG内のテキストを読み出す</title>
<script language="JavaScript"><!--
function getSVGText(sName)
{
svgObj = document.theSVG.getSVGDocument();
txt = svgObj.getElementById(sName).getFirstChild().getData();
document.myFORM.result.value = txt;
}
// --></script>
</head>
<body>
<embed src="test.svg" width="320" height="100" name="theSVG"><br>
<form name="myFORM">
<input type="button" value="１番目の文字を読み出す" onClick="getSVGText('myText1')"><br>
<input type="button" value="２番目の文字を読み出す" onClick="getSVGText('myText2')"><br>
<input type="button" value="３番目の文字を読み出す" onClick="getSVGText('myText3')"><br>
結果：<input type="text" name="result">
</form>
</body>
</html>
]]>
|
| 補足説明 |
ここで使用したSVGは以下の通りです。
<![CDATA[
<?xml version="1.0"?>
<svg>
<text id="myText1" x="10" y="20">KaZuhiro</text>
<text id="myText2" x="10" y="50">FuRuhata</text>
<text id="myText3" x="10" y="80">OpenSpace</text>
</svg>
]]> |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
SVG内のテキストを読み出す