Skip to main content

Bug Tracker

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 mrspeaker comment:1

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!

Changed November 17, 2009 02:10AM UTC by mrspeaker 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 yehuda comment:3

milestone: 1.2.21.5

Changed June 20, 2010 04:39PM UTC by dmethvin comment:4

resolution: → duplicate
status: newclosed

Dup of #4850.