Question

我正在尝试为这条线设置动画，因此它会从上到下开始，然后右转以使用Vivus.js绘制自己。然而，图形似乎没有动画，我无法弄清楚为什么..任何人都有一些SVG绘制动画的经验或许？这是笔：https://codepen.io/anon/pen/mLzYyE

代码：

local

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在所需方向上设置动画线

1 个答案: