css setting on svg element is broken

[jacktanner]

jQuery fails to manipulate the css of a child of an inline svg element. From ​http://en.wikipedia.org/wiki/Image:BlankMap-World6.svg:

<g id="fr" class="land fr" transform="translate(-29.9017, -45.0745)">

$("#fr").css({"fill": "green", "opacity": "1"}); sets opacity, but not fill

$(".fr").css({"fill": "green", "opacity": "1"}); sets neither opacity nor fill

[mrspeaker]

I was having a play with this one, and I'm not sure exactly what is supposed to happen: it seems like SVG controlled by regular-ol' JavaScript is weird too (at least, in Firefox3.5)

I made a "test page" that is simpler than that huge svg map: ​http://www.mrspeaker.net/dev/jq/testsvg.xhtml

It certainly looks like getElementsByClassName doesn't work - class selectors return 0 length. But even if they did work, the CSS stuff seems even weirder: opacity works (perhaps because it's a "normal" definition) but to get colours to work via JS I had to use the setAttributeNS method.

Anyhoo, I just thought I'd post that up in case it could help.

Earle.

P.S. If there are serious changes need (or wanted) to get SVG stuff to play nice, I'd have a chat to Dmitry Baranovskiy (​http://dmitry.baranovskiy.com/) - the SVG/JS master!

[mrspeaker]

There looks like there is a patch for this: ​http://dev.jquery.com/ticket/4850

Perhaps we could merge these issues.

[dmethvin]

Dup of #4850.