Removing the built-in padding-margin of SVGs
Hi there, I have to create a component where if you hover over a part of the SVG and click it, a certain popup should appear. The issue with this is if I use inspect element from Chrome, it seems like the SVGs have a built-in padding/margin, so there's an overlap that I don't know how to eliminate. Here's a picture of what I mean:
8 Replies
So they don't have any margin/padding by default. SVG are based on vector points on a infinite grid. If you look closely corners of the path do touch the edges of the highlight. So its already to the edges.
a svg height/width and viewbox is always going to be a box just like other html elements though.
I see, so it would be impossible to make it so that the green-related popup doesn't open up when you click outside of the green "Strategy" shape?
Put the link around the path not the svg
I'd have to see a codepen or something to help you more probably though
Oh ok, I would have to make some changes to it/make it more generic before sharing it, it will take me a bit. In the image I'm hovering over the path (everything is a big SVG)
its really not to tell what is possible without the actual code. path could work, but depends on how it is build
so we'll have to dive into it. b1 is svg master, he'll find a way
Ngl my first thought was img src with img mapp 😂... Those were so rad back in the day. But yea a link on the textarea or path would work great.
yea, thought of that too
Sorry, I forgot to give an update, turns out there was actually no issue because even though when I use inspect element and hover over the <path /> I get a big skyblue square that overlaps with the other elements shown in the picture, it's not like it actually takes all that space. I added a className of "my-element" to the path, added an eventlistener to console log something when that classname is clicked, and it works correctly. As in, if I click 2px outside of the green graphic, nothing gets consolelogged