Creazione dinamica di collegamenti SVG in JavaScript

Question

Sto creando dinamicamente elementi SVG da JavaScript. Funziona bene per oggetti visivi come un rettangolo, ma sto avendo problemi a produrre xlink funzionanti. Nell'esempio sotto il primo rettangolo (che è definito staticamente) funziona correttamente quando viene cliccato, ma gli altri due (creati in JavaScript) ignorano i clic ... anche se l'ispezione degli elementi in Chrome sembra mostrare la stessa struttura.

Ho visto più domande simili venire, ma nessuno che risolve esattamente questo. Il più vicino che ho trovato è stato [adding image namespace in svg through JS still doesn't show me the picture] ma non funziona (come indicato di seguito). Il mio obiettivo è di farlo semplicemente in JavaScript, senza dipendere da JQuery o da altre librerie.

---

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

Solo un <a> può essere un collegamento in modo da aggiungere un attributo xlink: href di un elemento <rect> avrà alcun effetto.

È necessario utilizzare setAttributeNS che si dice non funzioni ma lo fa per me, quindi forse c'era qualche altro problema.

Questo esempio funziona per me:

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>