Html – make an html svg object also a clickable link

anchorhtmlobjectsvg

I have an SVG object in my HTML page and am wrapping it in an anchor so when the svg image is clicked it takes the user 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, clicking the svg object doesn't take me to google. In IE8< the span text is clickable.

I do not want to modify my svg image to contain tags.

My question is, how can I make the svg image clickable?

Best Answer

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/

Related Solutions

Html – Should I make HTML Anchors with ‘name’ or ‘id’

According to the HTML 5 specification, 5.9.8 Navigating to a fragment identifier:

For HTML documents (and the text/html MIME type), the following processing model must be followed to determine what the indicated part of the document is.

Parse the URL, and let fragid be the <fragment> component of the URL.

If fragid is the empty string, then the indicated part of the document is the top of the document.

If there is an element in the DOM that has an ID exactly equal to fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.

If there is an a element in the DOM that has a name attribute whose value is exactly equal to fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.

Otherwise, there is no indicated part of the document.

So, it will look for id="foo", and then will follow to name="foo"

Edit: As pointed out by @hsivonen, in HTML5 the a element has no name attribute. However, the above rules still apply to other named elements.

Html – Make a div into a link

Came here in the hope of finding a better solution that mine, but I don't like any of the ones on offer here. I think some of you have misunderstood the question. The OP wants to make a div full of content behave like a link. One example of this would be facebook ads - if you look, they're actually proper markup.

For me the no-nos are: javascript (shouldn't be needed just for a link, and very bad SEO/accessibility); invalid HTML.

In essence it's this:

Build your panel using normal CSS techniques and valid HTML.
Somewhere in there put a link that you want to be the default link if the user clicks on the panel (you can have other links too).
Inside that link, put an empty span tag (<span></span>, not <span /> - thanks @Campey)
give the panel position:relative

apply the following CSS to the empty span:

{ 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;

  z-index: 1;

  /* fixes overlap error in IE7/8, 
     make sure you have an empty gif */
  background-image: url('empty.gif');
}

It will now cover the panel, and as it's inside an <A> tag, it's a clickable link

give any other links inside the panel position:relative and a suitable z-index (>1) to bring them in front of the default span link

Best Answer

Related Solutions

Html – Should I make HTML Anchors with ‘name’ or ‘id’

Html – Make a div into a link

Related Topic