使用Vivus.js向后运行SVG动画

Question

我正试图向后运行SVG行动画，但我似乎无法使用Vivus插件使其工作。

这是我的密码

我的SVG：

<svg version="1.1" id="eco-system-line-1" class="eco-system-line active" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 2.9 64.5" enable-background="new 0 0 2.9 64.5" xml:space="preserve">
    <g>
        <path fill="none" stroke="#1C75BC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M 1.3 63.3 L 1.3 1.2"/>
    </g>
</svg>

我的jQuery：

 var svgLine = new Vivus(eco-system-line-1);
 svgLine.play(-1);

Vivus插件网站声明“播放(速度)以参数中给定的速度播放动画。这个值可以是负值，可以是反向，在0到1之间可以慢走，或者比1更快。默认情况下这个值是1。”

由于某种原因，当我添加任何负值时，插件就无法工作，也不会出现任何控制台错误。

有人成功了吗？

上面的代码是一个小提琴

Answer 1

当vivus开始的时候，没有笔画。然后，它会逐渐地把划水画出来，并及时向前推进。

如果你向后运行它，它从没有笔画开始，永远不会抽出时间画一个。

如果您等到它画了什么东西，您可以向后运行它。例如。

setInterval(function(){ svgLine.play(-1); }, 3000);

如果您阅读了文档，那么大概也有一种方法可以让它从绘图的位置开始。

Answer 2

有一个叫做"finish“的方法，您可以使用它。

svgLine.finish().play(-1);

这样就行了。