SVG animateMotion＆JavaScript

Question

我使用path和animateMotion。它運行良好，直到我試圖使用JavaScipt動態生成它。我用jQuery SVG

我試圖追加動畫代碼usind本地方法：

$("#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？

Answer 1

您正在使用Safari或Chrome嗎？恐怕dynamically added animation在那裏不起作用。嘗試使用Firefox或Opera。

Answer 2

我找到了解決辦法：

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);