Bug Tracker

Opened 15 years ago

Closed 13 years ago

#1745 closed bug (duplicate)

css setting on svg element is broken

Reported by: jacktanner Owned by:
Priority: major Milestone: 1.4.4
Component: core Version: 1.2.1
Keywords: Cc:
Blocked by: Blocking:


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

Change History (4)

comment:1 Changed 13 years ago by 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.


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!

comment:2 Changed 13 years ago by mrspeaker

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

Perhaps we could merge these issues.

comment:3 Changed 13 years ago by yehuda


comment:4 Changed 13 years ago by dmethvin

Resolution: duplicate
Status: newclosed

Dup of #4850.

Note: See TracTickets for help on using tickets.