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;
}

干杯!

score 1 · Accepted Answer

你可以使用 jQuery。简单地

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

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


});

score 1 · Accepted Answer

用Drew Baker的回答解决了这个问题

事实证明，您必须使 SVG 的 DOM “可见”。

2 回答 2