html - 在容器内使用 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>

结合样式表，style.css，在我的 HTML 文件中引用它，以及外部 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');


});