Question

我正在使用javascript动态创建一个svg元素及其内容，并将其添加到我的网页中。

我想在窗口调整大小时重新绘制svg，但是，正在重新绘制元素，但是即使在重新创建这些元素后，附加的动画也不会再次启动！

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

我在resize事件上尝试了以下内容：

清空svg，并重新创建其中的元素 - 动画在页面上工作加载，娱乐时不会触发
将具有相同动画的新动画元素再次添加到现有元素 - 无论多个动画元素出现在svg元素内部，例如rect，它们没有动画！
删除整个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开始 -

仅限页面加载？
创建动画元素的那一刻？
将animate附加到父元素的那一刻？

）

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

我的目标是ios设备，因此必须支持safari。有什么其他方法可以在resize上用动画重绘svg吗？

有人可以为此倾诉吗？我坚持这个问题......任何帮助或信息都会很棒..谢谢。

Answer 1

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

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

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

1 个答案: