How to dynamically colour svg images in a webpage?

Question

I'm trying to get a specific part of an svg image (created in inkscape if it matters) to change colour on some event. I'm pretty sure that I can use css to do this, but I cannot figure out how to select the id from the specific svg file. If the object in the svg has id='ToChange' and the html tag has id='svgToChange', I'd think the css would be

#svgToChange #ToChange :hover {...}

but this doesn't seem to work. Any ideas? Would javascript be better for this?

It's not really a duplicate as he wants to do this with css not javascript. — Sharper, Sep 30 '15 at 15:56

score 1 · Accepted Answer · edited Oct 05 '15 at 20:04

1

#svgToChange:Hover #ToChange{fill: #whatever}

Edit from question asker:

I figured out how to do it, the problem was because I had the svg in an img tag instead of an object tag.

edited Oct 05 '15 at 20:04

user2618908

61
5

answered Sep 30 '15 at 15:48

Sharper

327
3
17

quite right Daniel. I missed the # from #svgToChange thanks for that catch. – Sharper Sep 30 '15 at 15:53
This isn't working for me for some reason? The svg's object is defined in a separate file, and is brought in using an html img tag; the object is – user2618908 Sep 30 '15 at 16:11
can you post up a pen? – Sharper Sep 30 '15 at 16:33
Pen? What would that be? Sorry, new to all this. – user2618908 Oct 01 '15 at 14:42
It's a way of playing with code and sharing with the community: http://codepen.io/ – Sharper Oct 02 '15 at 11:16

How to dynamically colour svg images in a webpage?

1 Answers1