Using svg as a background image, need hover only actived on the SVG area

I’m a beginner on svg, implemented the SVG on my html element like this:

<div class="temporal"></div>

And I created css class:

.temporal{
    position: absolute;

    top: 20px;
    left: 30px;

    width: 130px;
    height: 150px;

    background-image: url('/assets/temporal.svg');
    background-size: contain;
    background-repeat: no-repeat;
    
    z-index: 10;
    background-color: aliceblue;
}

.temporal:hover {
    opacity: 0.5;
    filter: brightness(0.8);
}

My goal is to detect hover event only when it is on my svg element. Here’s my svg:

How to detect hover element only on the red-brown area ? while ignoring white/aliceblue area?

I’ve tried added pointer-events: none; on the parent and pointer-events: visiblePainted on the hover element. But still no result.

I’ve tried using javascript

const temporal = document.getElementById('temporal')
console.log(temporal)
temporal.addEventListener('mouseover', function(event){
    console.log(event.target.tagName)
    if (event.target.tagName === 'path' || event.target.tagName === 'rect' || event.target.tagName === 'circle' || event.target.tagName === 'use') {
        console.log("Hovered over visible part of the SVG!");
    } else {
        console.log("Hovered over non-SVG area!");
    }
})

temporal.addEventListener('click', function(event){
    console.log(event.target.tagName)
    if (event.target.tagName === 'path' || event.target.tagName === 'rect' || event.target.tagName === 'circle' || event.target.tagName === 'use') {
        console.log("Clicked on the visible part of the SVG!");
    } else {
        console.log("Clicked outside the visible part of the SVG!");
    }
})

But everything detected as div.

I’ve tried using object:

<object class="temporal" id="temporal" data="/assets/temporal.svg" width ="130"; height="150";> </object>

Still can’t hover only on the svg area.

Can’t apply solution on this answer
Apply hover effect only to non-transparent parts of an image with CSS

Since the svg takes 440 lines and can’t have that much lines in the html page, so i’ve to import it.

You need to sign in to view this answers