JSFiddle - React, Tailwind, and code Playground

HTML

Please try to click the line, if you are lucky, you can click it and see the Message. 

<br><br>
Also try to move the mouse across the line to see whether the pointer change to hand when the mouse on the line. 
On other major browsers, you'll see the pointer change. But on firfox, you need luck to see it. 

<svg style="border:1px solid black;" width="500px" height="500px" viewBox="0 0 500 500">
<g>
<path pointer-events="all" stroke-linecap="round" stroke="#ff0000" stroke-opacity="1" stroke-width="5" fill="none" class="leaflet-clickable" d="M100 178L400 193" onclick="alert('Lucky!')"/>
</g>
</svg>

CSS

body{
		cursor:default;
	}
	.leaflet-clickable{cursor: pointer;}