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>

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

1 个答案: