奇怪的是我找不到其他人报告这个问题；这让我觉得也许我做错了什么。
我有一个 <style>包含 :hover 的 SVG 中的标记伪类，当 SVG 直接嵌入到 HTML 中时它可以正常工作，但是当我把它放在一个符号中并用 <use> 引用它时标签，<style>里面的样式标签未应用。
SVG 直接嵌入:
<svg width="400" height="110">
<style>
#myRect:hover {
fill: red;
}
</style>
<rect id="myRect" width="300" height="100" />
</svg>
在符号中定义，并通过 <use> 引用标签。
<svg style="display: none">
<symbol id="rectangle">
<style>
#myRect:hover {
fill: red;
}
</style>
<rect id="myRect" width="300" height="100" />
</symbol>
</svg>
<svg width="400" height="110">
<use href="#rectangle"></use>
</svg>
为什么会这样？!似乎是一种奇怪的行为，我是不是漏掉了什么？!
更新:正如 Temani Afif 在评论中提到的，这个问题只存在于 Chrome 中，Firefox 似乎可以按预期工作。 (没有在任何其他浏览器上测试过)
这实际上是一个有趣的案例，虽然 Temani Afif 给出了正确的解决方案，但我认为值得在单独的答案中多说几句。
首先，问题不在于 <style> 在哪里标签坐。它真的可以在任何地方。真正的问题是由 :hover 提出的选择器。
<svg style="display: none">
<symbol id="rectangle">
<style>
#myRect {
fill: blue;
}
#myRect:hover {
fill: red;
}
</style>
<rect id="myRect" width="300" height="100" />
</symbol>
</svg>
<svg width="400" height="110">
<use href="#rectangle"></use>
</svg>
上一个SVG 1.1 spec有一小段说“CSS2 选择器不能应用于(概念上)克隆的 DOM 树”，但是 SVG 2 spec放下那句话。
关于 <use> 的样式继承如何工作，现在有很多话要说。元素。但所有这些都与以下问题有关:“如果 corresponding element(<symbol>)有样式规则，它们如何应用于 shadow instance(<use> 中的内容)？”
但是我真的找不到答案的一个问题是:如果伪类状态适用于 shadow host , 影子实例元素也可以有那个状态吗？ 或者，更清楚地说:如果指针悬停在 <use> 上元素，它是否也悬停在影子树内的元素上？
CSS Selectors 中没有明显的答案或 CSS Scoping , 以命名其他两个相关规范。虽然 Temani Afif 暗示了第二个(以及在 ::shadow was removed 时提出的建议)，但这并不相同:没有人试图选择影子树，只是规则选择了相应的元素。
这就是 Firefox 回答"is"而 Chrome 回答“否”的地方。哪个是错误？有趣的是，我在任何一个错误跟踪器中都找不到错误报告。