Question

我正在尝试向后运行SVG线动画，但我似乎无法使用Vivus plugin

让它工作

这是我的代码

我的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.“

由于某种原因，当我添加任何负值时，插件不起作用，并且我没有收到任何控制台错误。

有人做过这项工作吗？

The above code as a fiddle

Answer 1

当vivus开始时，没有画出中风。然后它会逐步向前推进笔划。

如果你向后跑，它从没有击球开始，永远不会绕过画一个。

如果wait till its drawn something，您可以向后运行它。 E.g。

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

如果你阅读文档，大概还有一种方法可以让它从画画的位置开始。

Answer 2

您可以使用一种名为“完成”的方法。

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

应该这样做。

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

2 个答案: