假设:
<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>
为什么我什么都看不到?
当前回答
JQuery不能将元素附加到<svg>(它似乎在DOM资源管理器中添加了它们，但不在屏幕上)。
一种解决方法是在页面中附加一个<svg>和所有需要的元素，然后使用.attr()修改元素的属性。
$('body')
.append($('<svg><circle id="c" cx="10" cy="10" r="10" fill="green" /></svg>'))
.mousemove( function (e) {
$("#c").attr({
cx: e.pageX,
cy: e.pageY
});
});
http://jsfiddle.net/8FBjb/1/
其他回答
我为此做了一个小函数。对于jQuery的追加方法，问题是需要为SVG指定命名空间，即“http://www.w3.org/2000/svg”更多
如果我准备它为appendmethod呢?在这种情况下，你只需要提供一些参数:
tagName:它可以是每一个SVG元素，如矩形，圆，文本，g等。
text:如果您正在使用类似text tagname的东西，则需要指定text
和SVG元素的其他已知属性。
因此，我要做的是定义一个名为createSvgElem()的函数，它在内部使用document.createElementNS()。
这里有一个例子:
$("svg").append(
createSvgElem({tagName: "text", x: 10, y: 10, text: "ABC", style: "fill: red"})
)
这是函数:
function createSvgElem(options){
var settings = $.extend({
}, options);
if(!$.isEmptyObject(settings.tagName)){
var el = document.createElementNS('http://www.w3.org/2000/svg', settings.tagName);
for (var k in settings)
if(k != "tagName" && k != "text" && settings[k] != "")//If attribute has value
el.setAttribute(k, settings[k]);
if ("text" in settings)
el.textContent = settings.text; //el.innerText; For IE
return el;
}
}
你可以自己试试:
//Definition: function createSvgElem(options){ var settings = $.extend({ }, options); if(!$.isEmptyObject(settings.tagName)){ var el = document.createElementNS('http://www.w3.org/2000/svg', settings.tagName); for (var k in settings) if(k != "tagName" && k != "text" && settings[k] != "")//If attribute has value el.setAttribute(k, settings[k]); if ("text" in settings) el.textContent = settings.text; //el.innerText; For IE return el; } } //Usage: $(function(){ $("#svg-elem").append( createSvgElem({tagName: "rect", width: 130, height: 500, style: "fill: #000000a3;"}) ) $("#svg-elem").append( createSvgElem({tagName: "text", x: 30, y: 30, text: "ABCD", style: "fill: red"}) ) }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <svg id="svg-elem" width="200" height="200"> </svg>
我建议最好使用ajax并从另一个页面加载svg元素。
$('.container').load(href + ' .svg_element');
其中href是带有svg. xml的页面的位置。通过这种方式，您可以避免替换html内容时可能发生的任何紧张影响。另外，不要忘记在svg加载后打开它:
$('.svg_element').unwrap();
我可以看到圈在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>
当您将标记字符串传递给$时，它将使用浏览器的innerHTML属性在<div>(或其他适合特殊情况的容器，如<tr>)上被解析为HTML。innerHTML不能解析SVG或其他非html内容，即使它可以，它也不能告诉<circle>应该在SVG名称空间中。
innerHTML在svgelement上是不可用的，它只是HTMLElement的一个属性。目前也没有innerSVG属性或其他方法(*)来将内容解析为SVGElement。出于这个原因，您应该使用dom风格的方法。jQuery不能让您轻松访问创建SVG元素所需的名称空间方法。实际上，jQuery根本不是为SVG设计的，许多操作可能会失败。
HTML5承诺让您在未来使用<svg>而无需在纯HTML(文本/ HTML)文档中使用xmlns。但这只是一个解析器hack(**)， SVG内容仍然是SVG名称空间中的SVGElements，而不是HTMLElements，因此您将无法使用innerHTML，即使它们看起来像HTML文档的一部分。
然而，对于今天的浏览器，您必须使用XHTML(适当地作为application/ XHTML +xml;保存为本地测试的.xhtml文件扩展名)以使SVG能够正常工作。(这是有道理的;SVG是一种适当的基于xml的标准。)这意味着您必须转义脚本块中的<符号(或包含在CDATA部分中)，并包括XHTML xmlns声明。例子:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
</head><body>
<svg id="s" xmlns="http://www.w3.org/2000/svg"/>
<script type="text/javascript">
function makeSVG(tag, attrs) {
var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs)
el.setAttribute(k, attrs[k]);
return el;
}
var circle= makeSVG('circle', {cx: 100, cy: 50, r:40, stroke: 'black', 'stroke-width': 2, fill: 'red'});
document.getElementById('s').appendChild(circle);
circle.onmousedown= function() {
alert('hello');
};
</script>
</body></html>
*:嗯，有DOM Level 3 LS的parseWithContext，但是浏览器的支持很差。编辑添加:然而，虽然你不能将标记注入到SVGElement中，你可以使用innerHTML将一个新的SVGElement注入到HTMLElement中，然后将它传输到所需的目标。不过它可能会慢一点:
<script type="text/javascript"><![CDATA[
function parseSVG(s) {
var div= document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
div.innerHTML= '<svg xmlns="http://www.w3.org/2000/svg">'+s+'</svg>';
var frag= document.createDocumentFragment();
while (div.firstChild.firstChild)
frag.appendChild(div.firstChild.firstChild);
return frag;
}
document.getElementById('s').appendChild(parseSVG(
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" onmousedown="alert(\'hello\');"/>'
));
]]></script>
**:我讨厌HTML5的作者似乎害怕XML，并决心将基于XML的功能硬塞进混乱的HTML中。XHTML几年前就解决了这些问题。
这是我今天对FF 57的工作:
function () {
// JQuery, today, doesn't play well with adding SVG elements - tricks required
$(selector_to_node_in_svg_doc).parent().prepend($(this).clone().text("Your"));
$(selector_to_node_in_svg_doc).text("New").attr("x", "340").text("New")
.attr('stroke', 'blue').attr("style", "text-decoration: line-through");
}
使:
