Question

我遇到了问题。我在.svg文件中使用了svg动画。这工作正常，如果我在<object>中添加它，它会显示我用css做的动画。一切都很好。但是这个svg不在页面顶部，所以如果用户滚动那里，动画就已经完成了。当然，我可以为它添加一个无限的论点，但这看起来很疯狂。所以我的问题是当svg到达视口时如何触发动画。

是否有任何插件我还没有找到你可以在每个svg添加一个类的插件 - 对象或类似的东西？或任何其他想法如何实现？它应该在同一页面上支持多个svg - objets以满足我的需求。我无法通过wow.js或waypoints.js找到任何方法。谢谢！

Answer 1

你说你正在使用“svg动画”，我认为你是指使用SMIL动画（<animate>等）而不是CSS动画。

如果是这种情况，那么您需要做的是将begin属性设置为“无限期”，然后在您想要动画时调用beginElement()元素上的<animate>开始。

您的代码如下所示：

if (viewPortIsOnScreen())
{
   myObject.contentDocument.getElementById("my_animation").beginElement();
}

您可以在此处详细了解beginElement()：

https://www.w3.org/TR/SVG/animate.html#InterfaceElementTimeControl

进入视口时显示svg动画

1 个答案: