JSFiddle - React, Tailwind, and code Playground

HTML

<div id="status"></div>
<div id="sample_image">
    <svg id="cover" preserveAspectRatio="none">
        <path d="M 70,266 L 196,56 320,266 196,478 z"></path>
    </svg>
</div>

CSS

#sample_image {
    background-image: url('http://i.stack.imgur.com/m4zEw.png');
    width: 448px;
    height: 701px;
}

#cover {
    width: 100%;
    height: 100%;
}

#cover path {
    fill: transparent;
}

JavaScript

$('#cover path').on('click', function() {
    //Used only for sample output
    $('#status').append("<span>Click received.</span> ");
})