检测SVG动画何时结束

Question

检测SVG动画何时结束

4

我在body标签中有一张SVG图像，正在使用以下代码进行动画处理：

     <clipPath id="left-to-right">
     <rect x="0" y="0" width="0%" height="100%" >
         <animate attributeName="width" values="0%;100%" dur="5s" fill="freeze"/>
     </rect>
 </clipPath>

我正在通过图像标签将.svg添加到body中，如下所示：

<body>
 <div id="loading-container">
  <img id="silhoutte" src="Images/Silhoutte.svg">
 </div>
 <div id="content"> 
  /* Content in here */ 
 <div>
</body>

在显示实际内容之前，SVG作为“加载”动画，以预加载/缓存一些高分辨率图像。 我的困难在于尝试检测SVG动画的结束，以便显示内容div。如果可能的话，如何检测动画呢？ 我愿意听取更好的建议，以使用我创建的动画SVG实现网页加载屏幕。 谢谢！

- user6190168

你正在使用已被弃用的SVG SMIL动画。因此，请考虑改用CSS动画。起初，为了确保跨浏览器性能，它们需要一些练习，但对于SVG元素非常有效。 - Francis Hemsher

@FrancisHemsher 发布后不久，我意识到它已经过时了！我会研究CSS动画来复制SMIL的效果。谢谢您的回复！ - user6190168

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Schlaus · Accepted Answer

3

SVG动画元素应该在动画结束时触发一个endEvent，所以以下内容应该可以起作用：

document.querySelector('#left-to-right animate').addEventListener('endEvent', function() {
    console.log('Animation finished');
}, false);

- Schlaus

不过，如果动画是在<img>元素中，则无法触发事件。 - Robert Longson

正如@RobertLongson所指出的那样，在<img>标签中，您无法触发事件。我还了解到SVG SMIL动画已被弃用，应改用CSS动画。使用Schlaus提供的函数，我应该能够在CSS动画中获得事件触发。谢谢你们两个！ - user6190168

@JordyMcnab 它们只在 Chrome 中被弃用。Firefox 目前没有计划移除它们，而且它们仍然在 SVG 2 规范中：https://www.w3.org/TR/SVG2/animate.html - Robert Longson

@RobertLongson 哦，我明白了，感谢您的更新。那么，原始问题的解决方案仍然是使用CSS动画来检测动画结束，因为事件不会在<img>标签内触发？ - user6190168

如果您使用img标签，则无法检测任何类型的动画结束。您需要使用另一个标签。 - Robert Longson