1

私は SVG (およびおそらく JavaScript) を学び始めたところですが、なぜこれがスムーズに流れないのか理解に苦しむところです。0 は少量 (おそらく x 軸上で水平方向に「1」) 移動しますが、その後、大きな範囲で跳び始めます。これは、私が使用しているブラウザ (Chrome) の更新/再描画のペースがはるかに長いためですか? 任意の入力をいただければ幸いです。

 <svg width="100%" height="100%"
    xmlns="http://www.w3.org/2000/svg" version="1.1" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
    onload="startup(evt)">
<script>
function startup(evt){
    svgDoc=evt.target.ownerDocument;
    setInterval(function(){
    e=svgDoc.getElementById("zero");
    var x = e.getAttribute("x");
    e.setAttribute("x",x+1);
    },1000);
}
</script>   
<defs>
    <text id="zero">0</text>
</defs>
<use x="40" y="20" xlink:href="#zero"/>
</svg>
4

1 に答える 1

1

文字列ではなく数字を使用していることを確認する必要があります。

var x = +(e.getAttribute("x"));
e.setAttribute("x",x+1);

JavaScriptは数値よりも文字列「加算」を優先x+1するため、「x」が文字列の場合、「文字列「1」を文字列xの末尾に追加する」ことを意味します。.getAttribute()単項「+」演算子を使用して戻り値を強制的に数値に変換することにより、この問題を回避できます。

（文字列を強制的に数値に変換する方法はいくつかあります。お好きなものを選んでください:-)

于 2012-09-25T12:45:18.957 に答える