在容器内使用CSS修改外部SVG

Question

我有这样的事情：

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

结合我的HTML文件中引用的样式表style.css以及外部SVG文件，如下所示：

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

我要做的是在容器翻转时更改SVG的填充。这可以用纯CSS吗？

我知道可以在css中做这样的事情;

rect:hover {
    fill: white;
}

但是，是否可以按照这一点做点什么呢？

.container:hover rect {
    fill: white;
}

干杯！

Answer 1

你可以使用jQuery。只是

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

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


});

Answer 2

修复了Drew Baker

的回答问题

How to change color of SVG image using CSS (jQuery SVG image replacement)?

原则上你必须使SVG的DOM“可见”。