Setting pointer-events="fill"
lets you receive mouse events on a shape even if its fill is set to none
<svg viewBox="0 0 100 100">
<style>
circle:hover{fill:green}
</style>
<circle class="target" cx="50" cy="50" r="50" fill="none"/>
</svg>