CODEWITHSUNDEEP
javascriptjqueryhtmlsvg
malloa
malloa

Reputation: 59

How to make SVG element a link?

How to make each element of svg image embeded in HTML file (such as circle etc. with some class) an active link? I need to have one svg image that represents some elements and they should be clickable links.

That's the fragment of SVG image: 

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
<a href="http://google.com" ><rect x="-124.203" y="112.232" fill="#E88324" stroke="#000000" stroke-miterlimit="10" width="175.362" height="226.087"/> </a>

I made a second div:

<div class="displayer" style=" width:100%; height: 100%;">
</div>

And tried to do this using jQuery:

$(document).ready( function () {
    $("a").click(function() {
        // $("body").hide();
        $(".displayer").load("http://google.com");
});
    });

But it doesn't make sense, how would you do that?

Upvotes: 2

Views: 441

Answers (1)

Legendary
Legendary

Reputation: 2242

Try it, test in fiddle

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="612px" height="792px" viewBox="0 0 612 792" 
 enable-background="new 0 0 612 792" xml:space="preserve">
    <a xlink:href="http://google.com">
      <rect x="-124.203" y="112.232" fill="#E88324" 
        stroke="#000000" stroke-miterlimit="10" 
        width="175.362" height="226.087"/> </a> 
</svg>

You just forget about xlink:href in <a> inside svg

Upvotes: 2

Related Questions