A CodePen by subzey.

index.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="-100 -100 200 200">
	<desc>pointer-events css property demo</desc>
	<ellipse class="ellipse" cx="0" cy="0" rx="70" ry="70"></ellipse>
	<rect x="-100" width="200" y="-20" height="40"></rect>
	<text x="0" y="-10">Look, Ma!</text>
	<text x="0" y="10">Text and rect are clicked thru!</text>
</svg>

style.css

ellipse {fill: #aaa}
ellipse:hover {fill: #bbb}
ellipse:active {fill: #fb9}
rect {fill: #f00; opacity: .25}
text {text-anchor: middle; dominant-baseline: central; font: 12px Verdana; fill: #000}

text, rect {pointer-events: none}