用Vivus.js绘制所需方向的动画线

Question

我试图动画这条线，这样它将从上到下开始，然后右转画自己，用Vivus.js。然而，图形似乎没有动画，我不知道why..anyone是否有一些经验的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>

​