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

Question

我正在使用 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？

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

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