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: |
Description
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
comment:2 Changed 13 years ago by
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
Milestone: | 1.2.2 → 1.5 |
---|
Note: See
TracTickets for help on using
tickets.
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!