make a clickable link out of an html svg object

Problem

I have an SVG object in my HTML website that I wrapped in an anchor so that when the user clicks on the svg image, it brings them to the anchor link.

<a href="http://www.google.com/">
    <object data="mysvg.svg" type="image/svg+xml">
        <span>Your browser doesn't support SVG images</span>
    </object>
</a>

When I use this code block, I don’t get to Google when I click the svg object. The span text in Internet Explorer 8 is clickable.

I don’t want to change the tags in my svg image.

What I’m wondering is how I can make the svg picture clickable.

Asked by iancoleman

Solution #1

Actually, the easiest method to solve this is to put the following code on the object> tag:

pointer-events: none;

When users using the Ad Blocker plugin hover over the upper right corner, a tab-like [Block] appears (the same as a flash banner gets). That will also be removed by using this css.

http://jsfiddle.net/energee/UL9k9/

Answered by energee

Solution #2

I had the identical problem and was able to resolve it by:

Wrapping the object in a block or inline-block element.

<a>
    <span>
        <object></object>
    </span>
</a>

Adding the following to the a> tag:

display: inline-block;
position: relative; 
z-index: 1;

as well as the span> tag:

display: inline-block;

as well as the object> tag:

position: relative; 
z-index: -1

See http://dabblet.com/gist/d6ebc6c14bd68a4b06a6 for an example.

Here’s where I found it: https://bugzilla.mozilla.org/show bug.cgi?id=294932

Answered by Richard

Solution #3

I wish I could take credit for this, but I discovered a solution here:

https://teamtreehouse.com/forum/how-do-you-make-a-svg-clickable

for the anchor, add the following to the css:

a.svg {
  position: relative;
  display: inline-block; 
}
a.svg:after {
  content: ""; 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
}


<a href="#" class="svg">
  <object data="random.svg" type="image/svg+xml">
    <img src="random.jpg" />
  </object>
</a>

Both the svg and the fallback versions of the link work.

Answered by noelmcg

Solution #4

You could alternatively include something like this at the bottom of your SVG (just before the /svg> tag):

<a xmlns="http://www.w3.org/2000/svg" id="anchor" xlink:href="/" xmlns:xlink="http://www.w3.org/1999/xlink" target="_top">
    <rect x="0" y="0" width="100%" height="100%" fill-opacity="0"/>
</a>

Simply change the link to suit your needs. To cover the SVG it sits in, I used 100 percent width and height. The clever folks at Clearleft.com deserve credit for the technique, which I first saw in action there.

Answered by Ben Frain

Solution #5

Richard’s answer has been simplified. At the very least, it works on Firefox, Safari, and Opera:

<a href="..." style="display: block;">
    <object data="..." style="pointer-events: none;" />
</a>

Additional solutions can be found at http://www.noupe.com/tutorial/svg-clickable-71346.html.

Answered by Feuermurmel

Post is based on https://stackoverflow.com/questions/11374059/make-an-html-svg-object-also-a-clickable-link