SVG动画无法在页面加载后使用动态创建的元素

我使用javascript动态创建svg元素及其内容，并将其添加到div中，即我的网页。SVG动画无法在页面加载后使用动态创建的元素

我想重新绘制窗口大小的svg，但是，元素正在重绘，但附加的动画不会再次重新启动这些元素！

无论我做什么，动画只在页面加载时触发。

我试着调整大小事件如下：

排空SVG，并重新创建它里面的元素 - 动画上页面加载工作，在娱乐它不是触发
增加新动画元素再次与相同的动画元素 - 无论多个动画元素出现在像rect这样的svg元素中，他们都没有被动画！
删除整个svg！ 3 :)并重新创建一切从零开始，包括svg 元素并附加到容器div - 这似乎在Chrome和Firefox上工作，奇怪的是，即使这不适用于Safari浏览器！

这怎么能不行？它的一个全新的svg元素被添加到DOM中，但它们上的动画仍然不起作用？

考虑下面的代码：

setTimeout(function(){ 
      var anim = document.createElementNS('http://www.w3.org/2000/svg','animate'); 
    anim.setAttribute("attributeName", "height"); 
    anim.setAttribute("from", 0); 
    anim.setAttribute("to", 100); 
    anim.setAttribute("dur", "9s"); 
    anim.setAttribute("begin", "0s"); 
    anim.setAttribute("fill", "freeze"); 
      //assume i have a rect element in my svg 
    rect.appendChild(anim); 
     }, 5000);

如果持续时间小于所述时限（5秒）的动画是不可见的，如果其比超时时，正在显示了一些。

事实上，确实计数时停机SVG动画元素（假设beign =“1”，什么时候这个倒计时1：开始 -

只在页面加载
当下动画元素创建？
此刻动画被连接至母体元件？

）

如果不是在页面加载时，safari如何知道该元素之前存在，并且即使在删除并重新创建动画之后动画也已完成并冻结？ O.o

我的目标是ios设备，所以支持safari是必须的。有没有其他方法来重新调整大小的动画svg？

有人可以在此点上一些光？我坚持这个问题...任何帮助或信息将是伟大的..谢谢。

来源

2014-02-12 T J

检查了这一点http://stackoverflow.com/questions/14517454/animate-svg-element-every-x-seconds?rq=1 可能指向你在正确的方向 – user2991535

或许beginElement或beginElementAt方法的SVGAnimateElement是可用的。

setTimeout(function(){ 
      var anim = document.createElementNS('http://www.w3.org/2000/svg','animate'); 
    anim.setAttribute("attributeName", "height"); 
    anim.setAttribute("from", 0); 
    anim.setAttribute("to", 100); 
    anim.setAttribute("dur", "9s"); 
    anim.setAttribute("begin", "0s"); 
    anim.setAttribute("fill", "freeze"); 
      //assume i have a rect element in my svg 
    rect.appendChild(anim); 
    anim.beginElement(); 
     }, 5000);

来源

2014-03-06 07:07:38 defghi1977

'anim.beginElement（） '为我做了 –

SVG动画无法在页面加载后使用动态创建的元素

回答

相关问题