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

我有这样的想法：

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

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

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

rect:hover {
    fill: white;
}

但是，有没有可能按照这一思路做点什么呢

.container:hover rect {
    fill: white;
}

---

干杯

您可以使用jQuery。简单地

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

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


});

---

用来自的答案修复了此问题

---

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

事实证明，这似乎只在SVG是内联的而不是外部的情况下起作用，除非我遗漏了什么？

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

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


});