Dynamic creation of SVG links in JavaScript

Dynamic creation of SVG links in JavaScript

I am dynamically creating SVG elements from JavaScript. It's working fine
for visual objects like a rectangle, but I'm having trouble producing
functioning xlinks. In the example below the first rectangle (which is
statically defined) works correctly when clicked on, but the other two
(created in JavaScript) ignore clicks... even though inspecting the
elements in Chrome seems to show the same structure.
I've seen multiple similar questions come up, but none that exactly
address this. The closest I found was [ adding image namespace in svg
through JS still doesn't show me the picture ] but that's not working (as
noted below). My goal is to do this purely in JavaScript, without
depending on JQuery or other libraries.



<!-- Static - this rectangle draws and responds to click -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" id="svgTag">
<a xlink:href="page2.html" id="buttonTemplate">
<rect x="20" y="20" width="200" height="50" fill="red"
class="linkRect"/>
</a>
</svg>
<script>
var svgElement = document.getElementById ("svgTag");
// Dynamic attempt #1 - draws but doesn't respond to clicks
var link = document.createElementNS("http://www.w3.org/2000/svg",
"a"); // using http://www.w3.org/1999/xlink for NS prevents drawing
link.setAttribute ("xlink:href", "page2.html"); // no improvement
with setAttributeNS
svgElement.appendChild(link);
var box = document.createElementNS("http://www.w3.org/2000/svg", "rect");
box.setAttribute("x", 30);
box.setAttribute("y", 30);
box.setAttribute("width", 200);
box.setAttribute("height", 50);
box.setAttribute("fill", "blue");
link.appendChild(box);
// Dynamic attempt #2 (also draws & doesn't respond) - per
http://stackoverflow.com/questions/6893391
box = document.createElementNS("http://www.w3.org/2000/svg", "rect");
box.setAttribute("x", 40);
box.setAttribute("y", 40);
box.setAttribute("width", 200);
box.setAttribute("height", 50);
box.setAttribute("fill", "green");
box.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
"page2.html");
svgElement.appendChild(box);