I'm trying to animate stroke-dasharray with Snap.svg but didn't get it to work: nothing happens. The goal is to animate a straight line into a dashed line.

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;
}

Javascript

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

See this fiddle: /

I'm trying to animate stroke-dasharray with Snap.svg but didn't get it to work: nothing happens. The goal is to animate a straight line into a dashed line.

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;
}

Javascript

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

See this fiddle: http://jsfiddle/u4pxW/5/

• javascript
• svg
• snap.svg

Share Improve this question Follow edited Jul 9, 2014 at 10:24 Slevin asked Jul 9, 2014 at 10:10 SlevinSlevin 4,2421212 gold badges4646 silver badges9191 bronze badges 2

• Maybe this question may help you: Animate dotted path, one dot after another – Sven Commented Jul 9, 2014 at 10:18
• Hmm, in fact I want to animate a straight line into a dashed line. So I had to draw two lines: one straight line and one dashed line, while the straight line should bee shortener and the dashed line longer. Too plicated/too much code/too much unnecessary SVG code for a simple effect. It seems that this sort of animation isn't possible? – Slevin Commented Jul 9, 2014 at 10:23

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

It depends what effect you are going for, but you should be able to animate it. There's a couple of different ways to animate, and maybe for this specific example I would try 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