javascript - 用Vivus.js绘制多个SVG

我怎么能用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
});

最佳答案

关于图像没有动画的问题–我认为这是由两个分离的问题引起的：

首先，您的代码中有一个小语法错误。您需要将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
  });
});

工作片段，带有更简单/更小的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>