I posted this question all the way back in 2014. Essentially I was trying to solve two problems, how do I make an svg retain hover effects on a transparent part of an svg(specifically with an svg being used in an object tag so I can use hover effects easily), and how do I make it so that individual aspects of the svg can be used as independent links.
I tried a lot of complicated solutions, and eventually found a very simple solution to the first problem. Simply set a fill
(any color will do as long as it's not set to fill: none
), and set fill-opacity: 0
. This retains the pointer-click events, while keeping the svg transparent. This makes perfect sense in hindsight, but can be confusing if you are using a pre-made svg where the fill
may have been set to none(appropriately so.)
Here's an example of what that might look like in practice:
<circle cx="100" cy="75" r="50" style="fill: green; fill-opacity: 0;" />
This will create a circle that will retain any pointer-events(such as hover), despite being completely transparent.
I probably should have posted an answer at the time with this solution, because I assume that's the problem that most people who found this question were probably looking for a solution for. But at the time I felt like the answer was unfinished. I forgot about this question, and my solution to the first problem. But I decided I should revisit this question and give some much needed closure.
Since I asked this question, <a>
tags within svg's have received an update, and now it is quite simple to apply links to individual parts of an svg. It works exactly as you would imagine: <a href="" target="_blank">...Your SVG element here</a>
which was not exactly the case before(or at least I didn't understand how it worked before). Second problem solved!
Here is a code sandbox that shows the solution working, explained in the context of an svg, embedded with the <object>
tag: Working Demo