使用 Vivus.js 以所需方向动画线

Question

我正在尝试为这条线设置动画，使其从上到下开始，然后向右转以绘制自身，Vivus.js。但是，图形似乎没有动画，我不明白为什么……有人对 SVG 绘制动画有一些经验吗？这是笔：https://codepen.io/anon/pen/mLzYyE

代码：

var animate = ["animate1"];

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

Answer 1

据我所知，Vivus.js 仅适用于 path 元素。因此，在您的情况下，您应该将 rect 元素替换为 path。我还将序列动画的类型更改为 oneByOne。这是一个简化的例子：

var animate = ["animate1"];

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

svg {
  height: 500px;
  width: 200px;
}

path {
  stroke-width: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.3/vivus.min.js"></script>

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="animate1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 66.598 221.333" enable-background="new 0 0 66.598 221.333" xml:space="preserve">
 <path stroke="red" d="M0 0 l 0 20"/>
  <path stroke="red" d="M0 25 l 0 20"/>
  <path stroke="red" d="M0 50 l 0 20"/>
  <path stroke="red" d="M0 75 l 30 0"/>

</svg>

使用 Vivus.js 以所需方向动画线

Animate line in desired direction with Vivus.js

javascript

jquery

svg

svg-animate

vivus