使用jquery .appendTo时svg没有更新

Question

使用jQuery添加元素后，Chrome和Firefox无法直观地更新svg：

api

元素在devTools中可见并可编辑，但只有在标记中插入空格后才会出现。

我想念什么？

Answer 1

简而言之，jQuery是为处理HTML元素而制作的，无法处理svg。有关更详细的说明，请参阅this answer。您需要使用普通的javascript来操作DOM demonstrated here：

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

但是如果你正在进行大量的SVG操作，那么可以帮助解决这个问题的一个很酷的选择是Snap.svg你可以使用Snap.svg来创建它：

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