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

Question

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

...但是，如果我尝试使用 SVG 作为符号并使用 USE-tag 引用它； :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>