I'm having an issue with the svg being over the YouTube.
If you put your mouse over, just off to the right side of the svg and click, the video doesn't open, instead, it takes you back to the previous page.
Clicking on the space in-between the svg, that should open the YouTube video, it doesn't, instead, it takes you back to the previous page.
Everything outside the svg should be YouTube.
Only the area within the red line only should be clickable taking the user to Home
pointer-events: none; would need to be in place, or it interferes with the YouTube video.
The issue with using:
svg.home {
pointer-events: none;
}
While that works with the svg not interfering, it also disables being able to click on the svg.
How would this be fixed?
I need the svg to be able to be clicked, and not interfere with the YouTube.
CodePudding user response：
Because CSS has a box modal and everything is a box. So the entire house is inside a box and the entire box would be clickable or the entire box would not be clickable.
It can be solved in two ways
- You can divide your Home SVG into multiple svgs. e.g. 3 parts = (Home Roof Home Left Side Home Right Side). Arrange these svgs in such a way that it looks like the house and then make the parent of these SVGs clickable that takes you to previous page.
- Create your SVG using multiple paths and make each path individually clickable(taking user to previous page). See this for an idea http://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps