make an html svg object also a clickable link
Actually, the best way to solve this is... on the <object> tag, use:
pointer-events: none;
Note: Users which have the Ad Blocker plugin installed get a tab-like [Block] at the upper right corner upon hovering (the same as a flash banner gets). By settings this css, that'll go away as well.
http://jsfiddle.net/energee/UL9k9/
I had the same issue and managed to solve this by:
Wrapping the object with an element set to block or inline-block
<a>
<span>
<object></object>
</span>
</a>
Adding to <a>
tag:
display: inline-block;
position: relative;
z-index: 1;
and to the <span>
tag:
display: inline-block;
and to the <object>
tag:
position: relative;
z-index: -1
See an example here: http://dabblet.com/gist/d6ebc6c14bd68a4b06a6
Found via comment 20 here https://bugzilla.mozilla.org/show_bug.cgi?id=294932