Side navigation
#1745 closed bug (duplicate)
Opened September 27, 2007 08:09PM UTC
Closed June 20, 2010 04:39PM UTC
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
Attachments (0)
Change History (4)
Changed November 17, 2009 12:12AM UTC by comment:1
Changed November 17, 2009 02:10AM UTC by comment:2
There looks like there is a patch for this: http://dev.jquery.com/ticket/4850
Perhaps we could merge these issues.
Changed December 02, 2009 10:27PM UTC by comment:3
| milestone: | 1.2.2 → 1.5 |
|---|
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!