Javascript 如何在进入视口时启动动画SVG？

我需要你们的帮助。我找不到解决我问题的好办法。我在我的网站上有一些动画SVG。我用vivus.js来做这个。

---

问题是，当用户在带有动画SVG的部分上滚动时，我找不到启动动画的解决方案

要在SVG滚动到视图时触发动画，需要解决两个步骤：

检测SVG何时可见

最初暂停动画，然后在需要时触发它

检测元素何时可见 您需要为滚动事件添加事件处理程序。在该事件处理程序中，将页面滚动位置（

window.scrollY

）与SVG在页面上的位置进行比较。您可以使用

getBoundingClientRect（）

来获得它

有关实现此技术的示例代码，请参见下面的演示

开始运行动画 第二步实际上是在此时触发动画。如何使动画暂停，然后开始运行，取决于所使用的动画方法

SVG SMIL动画

在第一个示例中，我们使用了作为SVG标准一部分的SMIL动画元素

要让动画等待您开始运行，请将

begin

属性设置为

“unfinite”

。您可以通过调用

元素上的

beginElement（）

来启动它

//获取SVG页面上的位置
var svgLocation=document.getElementById（“mysvg”）.getBoundingClientRect（）；
//触发动画开始的滚动偏移。
//在本例中，它是SVG的底部。
var OFFSETOTRIGGERANIMATION=svgLocation.y+svgLocation.height；
//函数来处理滚动事件。
//为“onscroll”事件向文档中添加事件处理程序
功能滚动触发检查（evt）
{
var viewBottom=window.scrollY+window.innerHeight；
如果（视图底部>偏移偏移偏移）{
//启动SMIL动画
document.getElementById（“anim”）.beginElement（）；
//删除事件处理程序，使其不再触发
文档。删除EventListener（“滚动”，scrollAnimTriggerCheck）；
}
}
//为“onscroll”事件向文档中添加事件处理程序
文档。添加了文本列表（“滚动”，scrollAnimTriggerCheck）
svg{
边框：实心1px灰色；
}
p{
边缘底部：1000px；
}
向下滚动








请添加一个最小的工作代码段以及您试图实现的内容。