用Vivus.js绘制多个SVG

Question

我如何使用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
});

Answer 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
  });
});

工作代码段，包含更简单/更小的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>