使用 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 不知道如何为其设置动画（除此之外，它看起来像一台笔记本电脑 :)）：

（编辑：如果您正确设置 fill/stroke，您可以将其设置为动画，请参阅@wwv 的评论和下面的 link）

关于运行 Vivus on multiple objects – 它不支持直接传递多个objects/IDs，但是你可以避免为每个图像写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
  });
});

工作代码段，具有 simpler/smaller 个 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>

使用 Vivus.js 绘制多个 SVG

Draw multiple SVG's with Vivus.js

javascript

jquery

svg

vivus