SVGデータの内容を書き換える（時計）

■動作ブラウザ
Internet Explorer Netscape Navigator
4.0x 4.5 5.0x 5.5 6.0 4.x 6.0
Windows ○ - ○ ○ ○ ○ ×
Macintosh × × × - - ○ ×
UNIX - - - - - × ×

解　　説 　SVGデータの内容を書き換えるにはSVG内で内容を変更する文字のエレメントにidで名前を付けておきます。付けた名前はgetElementById("名前")で指定し、このエレメント内のノードのデータをsetDataで書き換えます。時刻を取得するにはnew Date()でオブジェクトを作成しgetHours()、getMinutes()、getSeconds()で取得しsetData()を使ってSVG内のエレメント内テキストを書き換えます。リアルタイムに表示するためにsetTimeout()を使って１秒ごとに関数を実行し書き換えを行います。
コード <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="clock.svg" width="320" height="80" name="theSVG"><br> </body> </html>

■サンプルスクリプトを実行する　>>実行
 ■各ブラウザでの動作結果を見る　>>View!