使用 Vivus.js 绘制多个 SVG答案

【问题标题】：Draw multiple SVG's with Vivus.js使用 Vivus.js 绘制多个 SVG
【发布时间】：2018-03-19 23:44:17
【问题描述】：

如何使用 Vivus.js 绘制多个 SVG，这样我就不必为每个绘图调用该函数，如下所示？另外，第二张图似乎有问题，即它没有动画......也许有人有这些经验吗？

由于 svg 代码大小，这是一支笔：https://codepen.io/anon/pen/KoNjjy

new Vivus(welcome, {
    type: 'async',
    start: 'autostart',
    duration: 50
});

new Vivus(tablet, {
    type: 'async',
    start: 'autostart',
    duration: 50
});

【问题讨论】：

标签： javascript jquery svg vivus

【解决方案1】：

关于图像没有动画的问题——我相信这是由两个单独的问题引起的：

首先，您的代码中有一个小语法错误。您需要将 ID 作为字符串传递：

new Vivus('welcome', { // note the quotes around 'welcome'
    type: 'async',
    start: 'autostart',
    duration: 50
});

其次，您的 codepen 中的平板电脑图像由单个填充路径组成，而不是单独的行，并且 Vivus 不知道如何对其进行动画处理（除此之外，它看起来像一台笔记本电脑:)）：

（编辑：如果您正确设置填充/描边，则可以对其进行动画处理，请参阅下面的@wwv 评论和链接）

关于在多个对象上运行 Vivus - 它不支持直接传递多个对象/ID，但您可以避免为每个图像编写 new Vivus …：

const animate = ["welcome", "tablet"];

animate.forEach(svgId =>
    new Vivus(svgId, {
      type: "async",
      start: "autostart",
      duration: 50
    })
);

或者，在旧的 ES5 语法中：

var animate = ["welcome", "tablet"];

animate.forEach(function (svgId) {
  return new Vivus(svgId, {
    type: "async",
    start: "autostart",
    duration: 50
  });
});

工作 sn-p，带有更简单/更小的 SVG：

const animate = ["circle", "square"];

animate.forEach(
  svgId =>
    new Vivus(svgId, {
      type: "async",
      start: "autostart",
      duration: 50
    })
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.3/vivus.min.js"></script>
<svg id="circle" viewBox="0 0 60 60" width="60" height="60" xmlns="http://www.w3.org/2000/svg">
  <circle cx="30" cy="30" r="25" fill="none" stroke="#ff005c" stroke-width="2" />
</svg>
<svg id="square" viewBox="0 0 60 60" width="60" height="60" xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" width="50" height="50" fill="none" stroke="#09f" stroke-width="2" />
</svg>

【讨论】：

实际上仍然可以为第二个 SVG 设置动画。问题是 fill=#ffffff 并且路径没有设置笔触颜色。 codepen.io/anon/pen/VXPZeW