Using pseudo-elements on SVG sub-elements

2019-07-14 02:30发布

I currently have an SVG which is a map of the UK, I've added some circle elements to the SVG which will be used as location markers.

<circle id="newcastle" cx="123.79" cy="152.28" r="2" fill="#ff671f"></circle>

Ideally, I was hoping to use the selector

#newcastle:hover::after { ... }

to create a pseudo-element when the user hovers over the location marker, but this doesn't appear to be working.

I've had a look online but most articles seem to be related to using SVGs in pseudo-elements and not the other way round. Is it currently possible to add pseudo-elements to SVG elements or is this not within spec? If not, are there any workarounds for achieving this effect?

标签: html css svg
0条回答
登录 后发表回答