如何在视口中触发 SVG 动画？ [复制]

【问题标题】：How to trigger SVG animation when is in the viewport? [duplicate]如何在视口中触发 SVG 动画？ [复制]
【发布时间】：2020-01-07 07:45:36
【问题描述】：

我的网站中有一个 SVG 动画，它放置在页面中心，并且在重新加载页面时，它会自动绘制 SVG，那么当它在视口中时如何触发它？

【问题讨论】：

使用IntersectionObserver，然后在 SVG 与视口相交时触发您需要的任何操作。

标签： jquery ajax svg

【解决方案1】：

如果你想使用 vanilla JS 创建函数

var isInViewport = function (elem) {
var bounding = elem.getBoundingClientRect();
return (
    bounding.top >= 0 &&
    bounding.left >= 0 &&
    bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
);

};

之后像这样使用它

var svg = document.querySelector('svg1');
if (isInViewport(svg)) {
    // start animation
}

【讨论】：