直線／曲線をリアルタイムに移動させる


■動作ブラウザ　【 IE:4.0　 NN:3.0】
Internet Explorer Netscape Navigator iCab Safari
3.0x 4.0x 4.5 5.0x 5.5 6.0 2.0x 3.0x 4.0x 4.x 6.0 7.0 2.x 1.x
Windows × ○ - ○ ○ ○ × ○ ○ ○ × × -
Macintosh × × × × - - × ○ ○ ○ × × × ×
UNIX - - - - - - × × × × × × -

ポイント svgObj.setAttribute("d","M0,30L0,50C40,"+y+",140,40,200,50L200,100z");
説　　明 SVG内で内容を変更する文字のエレメントにidで名前を付けます。付けた名前はgetElementById("名前")で指定します。このエレメント内の座標のデータをsetAttribute()で書き換えます。リアルタイムに表示するにはsetTimeout()を使って定期的（１秒）に座標を書き換えます。
サンプル
<html>
<head>
<title>直線/曲線をリアルタイムに移動させる</title>
<script language="JavaScript"><!--
svgObj = null
y = 0;
function setSVG()
{
svgObj = document.theSVG.getSVGDocument().getElementById("svgLine");
setTimeout("setTime()",1000);
}
function setTime()
{
y = (new Date()).getSeconds() * 4;
svgObj.setAttribute("d","M0,30L0,50C40,"+y+",140,40,200,50L200,100z");
setTimeout("setTime()",1000);
}
// --></script>
</head>
<body onload="setSVG()">
<embed height="480" name="theSVG" src="test.svg" width="640"><br>
</body>
</html>
補足説明 ここで使用したSVGは以下の通りです。

<?xml version="1.0"?>
<svg>
<path id="svgLine" style="stroke:blue;fill:yellow;stroke-width:5pt" d="M0,30L0,50C40,60,140,40,200,50L200,100z" />
</svg>

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