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()を使って1秒ごとに関数を実行し書き換えを行います。
コード <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!