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
Leave feedback about this