进入视口时显示 svg 动画 [关闭]答案

【问题标题】：reveal svg animation when entering viewport [closed]进入视口时显示 svg 动画 [关闭]
【发布时间】：2016-02-17 20:39:52
【问题描述】：

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

有没有我还没有找到的插件，你可以在其中添加一个类到每个 svg-object 或类似的东西那？或任何其他想法如何实现这一目标？它应该支持多个svg-objets 在同一页面上满足我的需要。我找不到任何使用wow.js 或waypoints.js 的方法。谢谢！

【问题讨论】：

Trigger animation when svg is in the viewport的可能重复
该链接用于 CSS 动画，而我怀疑 OP 正在使用 SMIL 动画。这是正确的@eckstein 吗？
@PaulLeBeau 哎呀，不，我没有使用 SMIL，但感谢您提供此代码示例。将研究这种技术。但是对于这个项目，我正在通过 CSS 为我的 svg 设置动画。如果这引起了混乱，我很抱歉。
@MoshFeu 感谢您的链接。我会看看我是否可以在我的情况下使用它。

标签： jquery css animation svg viewport

【解决方案1】：

您说您使用的是“svg 动画”，我的意思是您使用的是 SMIL 动画（<animate> 等）而不是 CSS 动画。

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

您的代码将如下所示：

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

您可以在此处阅读有关beginElement() 的更多信息：

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

【讨论】：