Inserting rect element inside anchor in svg with javascript doesn't work

Question

I am trying to create a clickable image using svg. Inside the svg I would have multiple rect elements (the parts of the image that I want to be clickable) and around them I would put anchor elements to make them clickable. When I do this using only html, it works without an issue:

 <a href="test.html"> <rect style="fill:#00ff00;stroke-width:0.264583" id="rect142" width="33.816833" height="24.259901" x="172.39232" y="63.95792" /> </a>

However, I need to do this dynamically, so I want to use javascript in order to insert the rect element and the anchor. Inserting the element alone works, but when I try to insert it inside an anchor, nothing shows up. Here is my javascript code:

 console.log("in") // make a simple rectangle var newRect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); newRect.setAttribute("id", "rect604-1"); newRect.setAttribute("x", "172.39232"); newRect.setAttribute("y", "63.95792"); newRect.setAttribute("width", "33.816833"); newRect.setAttribute("height", "24.259901"); newRect.setAttribute("fill", "#00ff00"); newRect.setAttribute("opacity", "0.66"); newRect.setAttribute("fill-opacity", "1"); newRect.setAttribute("fill-rule", "evenodd"); newRect.setAttribute("stroke-width", "0.264583"); var aTag = document.createElement('a'); aTag.setAttribute('href',"test.html"); var svg = document.getElementById("svg12"); console.log(svg) // append the new rectangle to the svg aTag.appendChild(newRect); svg.appendChild(aTag); //$("#rect604-1").wrap("<a href='https://mail.google.com/mail/u/0/#inbox'></a>");

Any ideas why my code doesn't work?

Answer 1

For creating a link with an svg object, you should use an svg anchor rather than an html anchor. So replace

var aTag = document.createElement('a');

by

var aTag = document.createElementNS("http://www.w3.org/2000/svg", "a")