SVG's use width attribute to animate which doesn't override css specificity

[MikaAK]

Recently I was animating SVG's and I noticed that if you're animating width of an SVG it will go directly as an attribute onto the SVG element. I'm wondering if there is a reason in doing this over style='width: <width>;'?

If you have any width set on the SVG in CSS, the width attribute will not override the set width however using the style attribute will.

I've created a pen displaying this behavior.

[ydaniv]

@MikaAK sorry, not seeing any animation in your pen, am I missing something?

[ibrierley]

I'm guessing thats the point, he's saying it doesn't work, as its animating the attribute, rather than the css.

However, an ellipse doesn't have a width attribute, its controlled by rx, ry, so not sure it makes sense anyway ?

[ydaniv]

@ibrierley yeah perhaps that's why. @julianshapiro is there a reason to prefer animating the attribute rather than style?

[MikaAK]

Oops indeed i was animated an ellipse, I've switched it over to the svg that's being animated to show that it still doesn't work if there are css styles.

[kyrasteen]

Hi there. Wondering if there is any update on this issue?

[Rycochet]

Will get looked at eventually, but some css in svg has been changed in browsers relatively recently too, so probably wants the proper tests written for it too...

[Rycochet]

(V2) Due to complexities with SVG, if an attribute is valid on it then Velocity will always use an attribute instead of a (css) property - on some things like width this might seem counter-intuitive, but others like transform are required in some browsers. If this shows it's head as an issue again then please open a new issue relating to V2.