css 检测SVG动画何时结束

fcwjkofz 于 2023-02-01 发布在其他

关注(0)|答案(1)|浏览(170)

我的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>

我通过一个image标签将. 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实现网页加载屏幕的更好方法，我愿意接受建议。
谢谢大家!

css

来源：https://stackoverflow.com/questions/37902525/detecting-when-a-svg-animation-has-ended

1条答案

按热度按时间

ctehm74n1#

SVG动画元素应该在动画完成后触发一个endEvent，因此应该可以执行如下操作：

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

赞(0）回复(0）举报 2023-02-01

我来回答

css 检测SVG动画何时结束

1条答案

相关问题

热门标签

最新问答