使用vivus instant制作的动画SVG无法通过自定义按钮暂停如何解决？

你调用的pauseAnimations()是原生SVG针对SMIL动画（、等内置动画标签）的控制接口，而Vivus Instant实现的SVG描边动画，是通过JavaScript动态修改路径的stroke-dasharray、stroke-dashoffset属性实现的，不属于SMIL动画范畴，所以原生暂停方法不会生效。

你需要通过Vivus实例提供的内置方法控制动画：

1. 初始化Vivus时，将实例存储为全局可访问的变量：

// 替换你原来的Vivus初始化代码，把实例存到变量里
const vivusInstance = new Vivus('svg8', {
  // 你原本的Vivus配置项，比如duration、type等参数保持不变
});

2. 修改暂停函数，调用Vivus实例的pause()方法实现暂停：

function f() {
  vivusInstance.pause();
}

如果需要后续恢复播放，调用实例的play()方法即可：

// 可选：恢复播放的函数
function playSvgAnimation() {
  vivusInstance.play();
}

内容的提问来源于stack exchange，提问作者kishu