如何使用Snap.svg动画笔触数组

Question

我正在尝试stroke-dasharray使用Snap.svg 制作动画，但没有使其正常工作：什么也没发生。目标是将直线动画化为虚线。

SVG

<svg>
    <line fill="none" stroke="#008D36" stroke-width="2" stroke-miterlimit="10" x1="175" y1="153" x2="175" y2="21" id="Line"/>
</svg>

的CSS

line {
    stroke-dasharray: 0,0;
}

Java脚本

$(function() {
    var s = Snap('svg');
    var l = s.select('#Line');
    l.animate({'stroke-dasharray':'1,20'}, 500);
});

看到这个小提琴：http : //jsfiddle.net/u4pxW/5/

Answer 1

这取决于您要达到的效果，但是您应该可以对其进行动画处理。有两种不同的动画制作方法，对于这个特定示例，我可以尝试Snap.animate ...

var s = Snap('svg');
var l = s.select('#Line');

Snap.animate(0,20, function( value ) {
    l.attr({ 'stroke-dasharray': '1,' + value});
}, 2000);

jsfiddle