Ich erstelle dynamisch SVG-Elemente aus JavaScript. Es funktioniert gut für visuelle Objekte wie ein Rechteck, aber ich habe Probleme, funktionierende xlinks zu erzeugen. Im folgenden Beispiel funktioniert das erste Rechteck (das statisch definiert ist) beim Anklicken korrekt, aber die anderen beiden (in JavaScript erstellten) ignorieren Klicks ... obwohl das Untersuchen der Elemente in Chrome anscheinend dieselbe Struktur aufweist.

Ich habe mehrere ähnliche Fragen gesehen, aber keine, die genau darauf eingehen. Das nächste, das ich gefunden habe, war [Das Hinzufügen eines Bildnamensraums in svg durch JS zeigt mir das Bild immer noch nicht an ] aber das funktioniert nicht (wie unten angegeben). Mein Ziel ist es, dies rein in JavaScript zu tun, ohne von JQuery oder anderen Bibliotheken abhängig zu sein.

<!-- 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);