为什么 CSS 规则不应用于嵌入式 SVG 符号？

Question

这是一个带有悬停的CSS规则的简单版本，它工作正常： https://codepen.io/hbi99/pen/oNvaEZK

。但是，如果我尝试使用 SVG 作为符号并使用 USE 标签引用它;：hover的 CSS 规则将被忽略。请参阅此示例： https://codepen.io/hbi99/pen/pozxaea

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
	<symbol id="box" viewBox="0 0 200 200">
		<style>
			.test {
				fill: #f00;
				opacity: 0.35;
			}
			.test:hover {
				fill: #fff;
				opacity: 1;
			}
		</style>
		<rect class="test" x="10" y="10" width="150" height="150"/>
	</symbol>
</svg>
<svg><use href="#box"></use>

知道为什么第二个示例没有按预期工作吗？ 我正在Chrome(v76(上对此进行测试

Answer 1

您链接的不应该工作的示例也有效。但是您在问题中包含的代码片段不起作用，因为您使用了类选择器，但不使用 SVG 图像中的类。

将class="utc-bar"添加到<rect>元素，它工作正常。

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
	<symbol id="box" viewBox="0 0 200 200">
		<style>
			.utc-bar {
				fill: #f00;
				opacity: 0.35;
			}
			.utc-bar:hover {
				fill: #fff;
				opacity: 1;
			}
		</style>
		<rect class="utc-bar" x="10" y="10" width="150" height="150"/>
	</symbol>
</svg>
<svg><use href="#box"></use>