CODEWITHSUNDEEP
javascriptsvgjquery-svg
user2083041
user2083041

Reputation: 513

How to add <a> link to svg path to navigate to another svg image using javascript

I am new to svg. I have two svg images i need to append link around the path in one svg image, onclicking that path i should navigate to another svg image. 

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <g id="path1">
     <a xlink:href="" target="_top">
       <path id="parcel" />
     </a>
     </g>
 </svg>

How should i get attribute into my application(html) and append href link to it using javascript. Thanks in advance

Upvotes: 4

Views: 7867

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101938

Get a reference to the <a> element using whichever method you choose. For example

 <a id="mylink" xlink:href="" target="_top">
   <path id="parcel" />
 </a>

var  mylink = document.getElementById("mylink");

Then you can set the xlink:href attribute using:

mylink.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
                      'http://www.google.com');

Upvotes: 5

Related Questions