svg nicht aktualisiert, wenn Jquery .appendTo mit

Chrome und Firefox können visuell nicht svg aktualisieren, nachdem ein Element mit jQuery und fügte hinzu:svg nicht aktualisiert, wenn Jquery .appendTo mit

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta charset="utf-8"> 
     <script src="../js/jquery-3.2.1.min.js"></script> 
    </head> 
    <body> 
     <svg width="300" height="300" viewBox="0 0 300 300" > 
     </svg> 
     <script> 
     jQuery('<circle/>', { 
       r: "25", 
       cx: "80", 
       cy: "80" 
       }).appendTo('svg'); 
     </script> 
    </body> 
    </html>

Element in DevTools sichtbar und editierbar ist, aber es scheint nur nach einem Leerzeichen Einfügen in das Etikett

Was vermisse ich?

Quelle

2017-11-17 Florimond

Kurz gesagt, jQuery ist für die Handhabung von HTML-Elementen gemacht und kann nicht mit SVG umgehen. Eine genauere Erklärung finden Sie unter this answer. Sie müssen Javascript Ebene verwenden, um das DOM als demonstrated here zu manipulieren:

var svg = document.getElementsByTagName('svg')[0]; //Get the first svg element 
var shape = svg.createElementNS("http://www.w3.org/2000/svg", "circle"); 
shape.setAttributeNS(null, "cx", 80); 
shape.setAttributeNS(null, "cy", 80); 
shape.setAttributeNS(null, "r", 25);

Aber eine coole Alternative, die dabei helfen können, wenn Sie eine Menge von SVG Manipulation tun ist Snap.svg Snap.svg verwenden könnten Sie stattdessen schaffen es wie folgt aus:

var s = Snap("svg"); 
var circle = s.circle(80, 80, 25);

Quelle

2017-11-17 15:24:07 xr280xr

Der Vollständigkeit halber, 'svgns = "http://www.w3.org/2000/svg"' – ccprog

Danke. Ich habe bearbeitet, um 'svgns' zu ersetzen. – xr280xr

svg nicht aktualisiert, wenn Jquery .appendTo mit

Antwort

Verwandte Themen