| ポイント |
<![CDATA[
svgObj = document.theSVG.getSVGDocument().getElementById("myText").getFirstChild();
dt = new Date();
h = dt.getHours();
m = dt.getMinutes();
s = dt.getSeconds();
txt = h+":"+m+":"+s;
svgObj.setData(txt);
]]>
|
| 説 明 |
SVG内で内容を変更する文字のエレメントにidで名前を付けます。付けた名前はgetElementById("名前")で指定します。このエレメント内のノードのデータをsetDataで書き換えます。new Date()でオブジェクトを作成しgetHours()、getMinutes()、getSeconds()で取得しsetData()を使ってSVG内のエレメント内テキストを書き換えます。リアルタイムに表示するにはsetTimeout()を使って定期的（１秒）に出力を行います。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>現在時刻をリアルタイムに表示する</title>
<script language="JavaScript"><!--
svgObj = null;
function setSVG()
{
svgObj = document.theSVG.getSVGDocument().getElementById("myText").getFirstChild();
setTimeout("setTime()",1000);
}
function setTime()
{
dt = new Date();
h = dt.getHours();
m = dt.getMinutes();
s = dt.getSeconds();
txt = h+":"+m+":"+s;
svgObj.setData(txt);
setTimeout("setTime()",1000);
}
// --></script>
</head>
<body onLoad="setSVG()">
<embed src="test.svg" width="320" height="80" name="theSVG"><br>
</body>
</html>
]]>
|
| 補足説明 |
ここで使用したSVGは以下の通りです。
<![CDATA[
<?xml version="1.0"?>
<svg>
<text id="myText" x="10" y="60" style="font-family:Times;font-size:48px;">Now Loading...</text>
</svg>
]]> |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
現在時刻をリアルタイムに表示する