在 SVG 子元素上使用伪元素

Ben*_*ort 5 html css svg

我目前有一个 SVG,它是英国地图,我向 SVG 添加了一些圆形元素,这些元素将用作位置标记。

<circle id="newcastle" cx="123.79" cy="152.28" r="2" fill="#ff671f"></circle>
Run Code Online (Sandbox Code Playgroud)

理想情况下,我希望使用选择器

#newcastle:hover::after { ... }
Run Code Online (Sandbox Code Playgroud)

当用户将鼠标悬停在位置标记上时创建一个伪元素,但这似乎不起作用。

我在网上看过,但大多数文章似乎都与在伪元素中使用 SVG 相关,而不是相反。目前是否可以向 SVG 元素添加伪元素,或者这不在规范内?如果没有,是否有任何解决方法可以实现这种效果?

小智 0

:before 和 :after 伪元素不适用于 SVG 标签内的元素。请参阅MDN 参考