检测时，SVG动画结束

我有一个是由下面的代码动画我的身体标签内的SVG图像：检测时，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> 
<div id="loading-container"> 
    <img id="silhoutte" src="Images/Silhoutte.svg"> 
</div> 
<div id="content"> 
    /* Content in here */ 
<div> 
</body>

而我显示的实际内容之前预先加载/缓存一些高分辨率图像的SVG是作为“加载”动画。

我的难处在于试图检测SVG动画的结尾以便显示内容div。如果可能，我将如何去检测动画？

我对使用我创建的动画SVG实现网页加载屏幕的更好方法提出了建议。

谢谢！

来源

2016-06-18 Jordy Mcnab

您正在使用的已弃用SVG的SMIL动画。因此，请看看CSS动画。最初他们需要一些练习来确保跨浏览器的性能，但对于SVG元素很适用。 –

@FrancisHemsher发布后不久，我意识到它已被弃用！我将研究CSS动画以从SMIL复制效果。谢谢您的回复！ –

一旦动画完成后的SVG元素应该触发一个onend事件，所以这样的事情应该工作：

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

来源

2016-06-18 23:35:27 Schlaus

如果动画位于''元素中，则不适用。事件不会从那里射击。 –

正如@RobertLongson在标签中指出的那样，您无法触发事件。我还了解到，SVG SMIL动画已被弃用，我应该使用CSS动画代替。我应该能够使用由Schlaus提供的功能在CSS动画中获得动画的事件触发。谢谢你们两位！ –

@JordyMcnab他们只在Chrome中被弃用。 Firefox目前没有计划将它们删除，它们仍然处于SVG 2规范中：https：//www.w3.org/TR/SVG2/animate.html –

检测时，SVG动画结束

回答

相关问题