假设:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
});
</script>
</head>
<body>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
</svg>
</body>
为什么我什么都看不到?
当前回答
我还没见过有人提到这个方法，但是document.createElementNS()在这个实例中很有帮助。
您可以使用普通Javascript将元素创建为具有正确名称空间的普通DOM节点，然后从那里对它们进行jquery化。像这样:
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
var $circle = $(circle).attr({ //All your attributes });
$(svg).append($circle);
唯一的缺点是您必须使用正确的名称空间单独创建每个SVG元素，否则它将无法工作。
其他回答
Bobince给出的公认答案是一个简短的、可移植的解决方案。如果您不仅需要添加SVG，而且还需要操作它，那么可以尝试JavaScript库“Pablo”(它是我编写的)。jQuery用户会感觉很熟悉。
您的代码示例将如下所示:
$(document).ready(function(){
Pablo("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
});
你也可以动态地创建SVG元素，而不需要指定标记:
var circle = Pablo.circle({
cx:100,
cy:50,
r:40
}).appendTo('svg');
我可以看到圈在firefox，做2件事:
1)将文件从html重命名为xhtml
2)更改脚本为
<script type="text/javascript">
$(document).ready(function(){
var obj = document.createElementNS("http://www.w3.org/2000/svg", "circle");
obj.setAttributeNS(null, "cx", 100);
obj.setAttributeNS(null, "cy", 50);
obj.setAttributeNS(null, "r", 40);
obj.setAttributeNS(null, "stroke", "black");
obj.setAttributeNS(null, "stroke-width", 2);
obj.setAttributeNS(null, "fill", "red");
$("svg")[0].appendChild(obj);
});
</script>
越来越流行的D3库很好地处理了附加/操作svg的奇怪问题。您可能会考虑使用它，而不是这里提到的jQuery hacks。
HTML
<svg xmlns="http://www.w3.org/2000/svg"></svg>
Javascript
var circle = d3.select("svg").append("circle")
.attr("r", "10")
.attr("style", "fill:white;stroke:black;stroke-width:5");
如果需要追加的字符串是SVG，并且添加了适当的名称空间，则可以将字符串解析为XML并追加到父对象。
var xml = jQuery.parseXML('<circle xmlns="http://www.w3.org/2000/svg" cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
$("svg").append(xml.documentElement)
我还没见过有人提到这个方法，但是document.createElementNS()在这个实例中很有帮助。
您可以使用普通Javascript将元素创建为具有正确名称空间的普通DOM节点，然后从那里对它们进行jquery化。像这样:
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
var $circle = $(circle).attr({ //All your attributes });
$(svg).append($circle);
唯一的缺点是您必须使用正确的名称空间单独创建每个SVG元素，否则它将无法工作。
