2

path と animateMotion を使用します。JavaScipt を使用して動的に生成しようとするまでは、うまく機能します。私はjQuery SVGを使用しています

ネイティブメソッドを使用してアニメーションコードを追加しようとしました:

    $("#scheme_wrapper").svg();
    var svg=box.svg('get');
    svg.add('<rect x="10" y="10" width="20" height="20" fill="red"><animateMotion id="KKK" path="M300,200 a100,100 0 1,0 -100,100 a100,100 0 0,0 100,-100" dur="20s" rotate="auto" repeatCount="indefinite" /></rect>');

小さな赤い四角形が表示されますが、アニメーションが開始されません。しかし、このアニメーション コードで svg ファイルを作成すると、Rectagle が正常に移動します。なんで？JavaScript を使用して動的に animateMotion を作成するには?

4

2 に答える 2

3

私は解決策を見つけました：

var svg=box.svg('get');
svg.rect(0,0,80,50,{fill:"red",id:"rectObj"});
var motion=document.createElementNS("http://www.w3.org/2000/svg","animateMotion");
motion.setAttribute("dur", "20s");
motion.setAttribute("repeatCount", "indefinite");
motion.setAttribute("path", "M300,200 a100,100 0 1,0 -100,100 a100,100 0 0,0 100,-100");
document.getElementById("rectObj").appendChild(motion);
于 2012-11-06T13:22:09.763 に答える
1

Safari または Chrome を使用していますよね？残念ながら、動的に追加されたアニメーションはそこで機能しません。代わりに Firefox または Opera を試してください。

于 2012-11-05T12:36:00.097 に答える