如何用Vivus.js批量绘制SVG？第二个SVG无动画问题求助

我之前也碰到过类似的批量调用Vivus和个别SVG动画失效的情况，给你分享下实用的解决方案：

一、批量创建Vivus动画实例 #

不用逐个手动调用new Vivus()，可以通过统一选择器+循环遍历的方式批量处理：

1. 先给所有需要动画的SVG添加一个共同的类名，比如vivus-animated（方便选择）；
2. 用document.querySelectorAll获取所有目标SVG；
3. 循环遍历每个元素，创建Vivus实例并传入统一配置。

示例代码：

<!-- HTML部分：给SVG加共同类 -->
<svg id="welcome" class="vivus-animated" ...></svg>
<svg id="tablet" class="vivus-animated" ...></svg>

// JS部分：批量初始化
const animatedSvgs = document.querySelectorAll('.vivus-animated');

animatedSvgs.forEach(svgEl => {
  new Vivus(svgEl, {
    type: 'async',
    start: 'autostart',
    duration: 50,
    // 可选：如果需要针对单个SVG做特殊配置，可以在这里判断元素ID做区分
    // duration: svgEl.id === 'tablet' ? 80 : 50
  });
});

这样不管有多少个SVG，都能一次性初始化，不用重复写代码。

二、解决第二个SVG无法动画的问题 #

结合Vivus的工作原理，常见的失效原因和排查方案如下：

1. 检查SVG的路径结构 #

Vivus是通过识别SVG中的<path>、<line>等描边元素来做动画的，如果你的第二个SVG存在以下情况，会导致动画失效：

• 路径被放在<defs>、<symbol>中，或者通过<use>标签引用（Vivus默认不会解析这些嵌套的元素）；
• SVG中没有可描边的元素（比如只有<rect>但没设置stroke属性）。

解决方案：

• 把需要动画的路径直接放到SVG根节点下；
• 或者在Vivus配置中指定selector参数，明确告诉它要动画的元素，比如：

  new Vivus('tablet', {
    type: 'async',
    start: 'autostart',
    duration: 50,
    selector: 'path, line, polyline' // 指定要动画的元素类型
  });
  

2. 确认SVG的可见性与样式 #

如果SVG设置了display: none，Vivus无法正确计算路径的尺寸和位置，导致动画不生效。

解决方案：

• 把SVG的初始样式改成opacity: 0，然后在Vivus的onReady或onFinish回调中设置为可见：

  new Vivus('tablet', {
    type: 'async',
    start: 'autostart',
    duration: 50,
    onReady: function(obj) {
      obj.el.style.opacity = 1; // 动画准备好后显示SVG
    }
  });
  

3. 检查元素选择器是否正确 #

如果之前是通过ID调用new Vivus('tablet', ...)，要确认：

• 页面中确实存在ID为tablet的SVG元素；
• 没有重复的ID（重复ID会导致JS只能选中第一个元素）。

4. 验证SVG的描边属性 #

Vivus的动画是基于**描边（stroke）**的，如果路径没有设置stroke属性，或者stroke-width为0，动画执行了你也看不到效果。

解决方案：
给第二个SVG的路径添加基础描边样式，比如：

#tablet path {
  stroke: #000;
  stroke-width: 2;
  fill: none; /* 如果不需要填充的话 */
}

总结 #

先通过批量选择器简化代码，再针对第二个SVG逐一排查路径结构、可见性、选择器和描边属性这几个关键点，应该就能解决问题了。

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