动画&冲击&dashoffset'属性与SVG.js

时间:2017-03-16 10:38:33

标签: javascript svg

我正在尝试使用SVG.js创建一个aniamted虚线。它使用的是使用Inkscape生成的SVG(保存为普通SVG)。 我可以正确地为一些属性设置动画(例如旋转)。动画描边 - dashoffset不起作用。我正在使用代码:

var flw1=SVG.get("NetDemandFlow");
flw1.animate({duration:1000}).stroke({dashoffset:100}).loop();

我可以在标记中看到它试图调整属性,但它似乎没有正确执行(使用chrome开发人员工具):

<path id="NetDemandFlow" d="m 261.62928,140.19115 c -0.60098,0 -1.20209,0 -5.7543,0 -4.5522,0 -13.05166,0 -21.55319,0" style="fill:none;stroke:#56baec;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1.5,1.5;stroke-dashoffset:0;stroke-opacity:1;marker-end:url(#Arrow1Send)" stroke-dashoffset="20"></path>

最后的部分是:" stroke-dashoffset="20"随着动画的变化而迅速变化。这看起来不正确,因为我预计它将更改行中较早的stroke-dashoffset:0属性。我是否错误地使用了这个模块,或者我不能用这个模块以这种方式为dashoffset设置动画? 我也尝试使用flw1.attr({'stroke-dashoffset':20});来更改属性,它也做同样的事情(尽管没有改变)。

0 个答案:

没有答案
相关问题