Dynamische Erstellung von SVG-Links in JavaScript

Question

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 Beispiel unten funktioniert das erste Rechteck (das statisch definiert ist) korrekt, wenn es angeklickt wird, aber die anderen beiden (in JavaScript erstellt) ignorieren Klicks ... obwohl die Überprüfung der Elemente in Chrome die gleiche Struktur zu haben scheint.

Ich habe mehrere ähnliche Fragen kommen, aber keine, die genau dies ansprechen. Der nächste, den ich gefunden habe, war [adding image namespace in svg through JS still doesn't show me the picture], aber das funktioniert nicht (wie unten erwähnt). 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); 

Answer 1

Nur ein <a> ein Link sein, so ein xlink Zugabe: keine Wirkung haben href-Attribut zu einem <rect> Elemente.

Sie müssen setAttributeNS verwenden, die Sie sagen, funktioniert nicht, aber es tut für mich so vielleicht gab es ein anderes Problem.

Dieses Beispiel funktioniert für mich:

var svgElement = document.getElementById ("svgTag"); 
 

 
var link = document.createElementNS("http://www.w3.org/2000/svg", "a"); 
 
link.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', "page2.html"); 
 
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);

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgTag"> 
 
</svg>