Modifying external SVG using CSS, inside a container

Question

I have something like this:

<div class="container">
    <embed src="files/image.svg" type="image/svg+xml" id="my-svg" />
    <h1>Title</h1>
    <h2>Sub title</h2>
</div>

Coupled with a stylesheet, style.css, that is referenced in my HTML file, along with the external SVG file like so:

<?xml-stylesheet type="text/css" href="style.css"?>

What I'm looking to do is change the fill of the SVG when the container is rolled over. Is this possible with pure CSS?

I know it's possible to do something like this in the css;

rect:hover {
    fill: white;
}

But, is it possible to do something along the lines of this?

.container:hover rect {
    fill: white;
}

Cheers!

score 1 · Answer 1 · answered Aug 04 '13 at 16:26

1

you can use jQuery. simply

 $('.container').mouseover(function(){

    $('rect').css('fill', 'white');


});

answered Aug 04 '13 at 16:26

Ronny K

Turns out this only seems to work when the SVG is in-line, not external, unless I'm missing something? – sBaildon Aug 05 '13 at 08:54

score 1 · Accepted Answer · edited May 23 '17 at 11:56

1

Fixed the issue with an answer from Drew Baker

Turns out you have to make the DOM of the SVG "visible".

edited May 23 '17 at 11:56

Community

answered Aug 05 '13 at 08:57

sBaildon

2 Answers2