JSFiddle - React, Tailwind, and code Playground

HTML

Path with {CSS fill:none;} will only have mouse over/out event triggered on the strokes, NOT inside the area. Notice the difference between top and bottom triangles. 

<svg viewBox='-10 -10 20 20'>
    <path d="M 0, 5.26429605180997L6.078685485212741,-5.26429605180997 -6.078685485212741,-5.26429605180997Z" transform="scale(0.8)" />
    <path class="fill-none" d="M 0, 15.26429605180997L6.078685485212741,5.26429605180997 -6.078685485212741,5.26429605180997Z" transform="scale(0.8)" />
</svg>

CSS

path { fill: transparent; stroke: #000; }
path.fill-none { fill: none; }

JavaScript

$(function () {
    $('path').on({
        mouseover: function () {
            console.log('over');
        },
        mouseout: function () {
            console.log('out');
        }
    });
});