1

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

我想在调整窗口大小时重新绘制 svg，但是，正在重新绘制元素，但是即使重新创建了这些元素，它们附带的动画也不会重新开始！

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

我在调整大小事件上尝试了以下操作：

  1. 清空 svg，并重新创建其中的元素 - 动画在页面加载时工作，在重新创建时它不会触发

  2. 将具有相同动画的新动画元素再次添加到现有元素 - 无论多个动画元素出现在 svg 元素（如 rect）中，它们都不会被动画化！

  3. 删除整个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 animate 元素的倒计时是什么时候（假设 beign='1'，这个倒计时到 1 是什么时候开始 -

  • 仅在页面加载时？

  • 创建动画元素的那一刻？

  • 动画附加到父元素的那一刻？

    )

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

我的目标是 ios 设备，因此必须支持 safari。有没有其他方法可以在调整大小时用动画重绘 svg？

有人可以对此有所了解吗？我被这个问题困住了......任何帮助或信息都会很棒......谢谢。

4

1 回答 1

2

也许 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);
于 2014-03-06T07:07:38.190 回答