How to change embedded SVG file fill color on hover with JQuery?

Question

I've got a big element, that includes SVG embed element (external file). I'd like to change its fill colour on a:hover. How would you approach it? It really drives me crazy :)

What I thought should work is:

$("a#title").hover(function() {
$("svg#logo").attr('fill','#f0f');
});

Wait, so you want to change the color used in the svg file with jquery? — thatidiotguy, Oct 16 '12 at 16:22
Similar to http://stackoverflow.com/questions/4906148/how-to-apply-a-style-to-an-embedded-svg — Erik Dahlström, Oct 18 '12 at 12:54

score 0 · Answer 1 · answered Oct 16 '12 at 16:25

0

I have never done this specifically, but it looks like this guy has a jquery plugin you could use located here.

answered Oct 16 '12 at 16:25

thatidiotguy

8,701
13
60
105

No, I'm not trying to use CSS, I'm trying to change an 'attribute' (fill). I believe these are different. – notjust1233971 Oct 16 '12 at 16:29

score 0 · Answer 2 · answered Oct 18 '12 at 12:57

0

What you have there is ok for when the svg is inline in the html. However when it's embedded by reference (embed, object, iframe, img) then the svg is actually a separate document. You can think of this as trying to change attributes in an html document that was referenced by an iframe.

Is the link inside the svg? If so you can put the styles/scripts inside the svg.

Here's an example that changes the fill of an svg shape from the html document (embed, object, iframe).

answered Oct 18 '12 at 12:57

Erik Dahlström

59,452
12
120
139

Thanks. But unfortunately the link is in html, so not inside svg. – notjust1233971 Nov 15 '12 at 14:21
As I wrote above that will only work when the svg is inline, not when it's referenced. – Erik Dahlström Nov 15 '12 at 14:47

How to change embedded SVG file fill color on hover with JQuery?

2 Answers2