Animate circle strokeWidth

[Kasper Gantzhorn]

Hi,

I can't figure out why I can't animate the stroke width of an circle with the element.animate. I can animate fill, radius, etc but not the stroke width, any ideas, thanks?

var s = Snap(".svg-playbtn");
var c = s.circle(125, 125, 115);

c.attr({

    fill: "none",

   stroke: "#FFF",

   strokeWidth: 2

});

//Then on hover

c.animate({r: 105, strokeWidth:7}, 300, mina.easeinout);

 

[Ian]

Works for me (Opera & Chrome)...

http://jsfiddle.net/QbkQM/2/

[Kasper Gantzhorn]

Yes, your exampel works perfect. I'm animating at path at the same time on mouseover, which should not affect it. The odd thing is, that i works perfectly in firefox, but not in Chrome and Safari:)

var s = Snap(".svg-playbtn");

var c = s.circle(400, 400, 380);

c.attr({

fill: "none",

stroke: "#FFF",

   strokeWidth: 4

});

var triangle = s.path("M69.261,287.083c0-29.943,22.125-42.191,48.053-27.22l293.313,169.08c25.932,14.973,26.157,39.47,0.226,54.441l-293.655,169.08c-25.932,14.971-47.94,2.722-47.94-27.221v-338.16H69.261z");

triangle.attr({

fill:'white',

stroke:'#FFF',

strokeWidth: 0,

transform: "t180,-50s"

});

$(".svg-playbtn").on('mouseover', function()

{

c.animate({r: 360, strokeWidth:20}, 300, mina.easeinout);

triangle.animate({strokeWidth: 20}, 300, mina.easeinout);

});

$(".svg-playbtn").on('mouseout', function()

{

c.animate({r:380, strokeWidth:4}, 300, mina.easeinout);

triangle.animate({strokeWidth: 2}, 300, mina.easeinout);

});

[Ian]

Happy to take a look if you can pop it on a jsfiddle

[Kasper Gantzhorn]

Hi Ian,

as I made the jsfiddle example from my file to illustrate the error, I found that the snapsvg.js source was different from the one you linked to (//cdn) Yours is Snap.svg 0.1.0 where the one I downloaded from the site is Snap.svg 0.2.0. Your version works perfectly, thanks man.

Kasper