Dynamische Erstellung von SVG-links in JavaScript

Ich bin die dynamische Erstellung von SVG-Elemente von JavaScript. Es funktioniert gut für visuelle Objekte, wie ein Rechteck, aber ich habe Schwierigkeiten, produzieren, funktionieren xlinks. Im Beispiel unten das erste Rechteck (das ist statisch definiert) korrekt funktioniert, wenn darauf geklickt wurde, aber die anderen beiden (JavaScript erstellt) ignorieren klickt... obwohl der Inspektion der Elemente in Chrom scheint zu zeigen, die gleiche Struktur.

Ich habe gesehen, mehrere ähnliche Fragen, aber keine, die genau diese Adresse. Der nächste, den ich fand, war [ hinzufügen von Bildern im svg-namespace durch JS noch nicht zeigen Sie mir das Bild ] aber das funktioniert nicht (wie unten beschrieben). Mein Ziel ist, diese rein in JavaScript, ohne je auf JQuery oder andere Bibliotheken.

---

<!-- 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 https://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);