JSFiddle - React, Tailwind, and code Playground

HTML

<p>Gray outline added for visibility. Can replace with 'none'.</p>

<svg width="100%" height="100%" version="1.1"
 xmlns="http://www.w3.org/2000/svg">
 
<polygon class="hoverable" points="220,100 300,210 170,250"
     onclick="alert('I am click functionality!');"/>
 
</svg>

CSS

polygon.hoverable
{
    fill: transparent;
    stroke:gray; /* Replace with none if you like */
    stroke-width: 4;
    cursor: pointer;
}

polygon.hoverable:hover
{
 stroke:black;   
}