CODEWITHSUNDEEP
javascriptsvgsnap.svg
Slevin
Slevin

Reputation: 4232

How to animate stroke-dasharray with Snap.svg

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.net/u4pxW/5/

Upvotes: 0

Views: 6169

Answers (1)

Ian
Ian

Reputation: 13852

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

Upvotes: 5

Related Questions