鉴于此html + svg
<div id="svg" style="width: 300px; height: 300px">
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
<svg x='10' y='10' id='group'>
<rect id="rect" x='0' y='0' width='100' height='100' fill='#f0f0f0'/>
</svg>
<svg x='100' y='100' id='group2'>
<rect id="rect2" x='0' y='0' width='100' height='100' fill='#f00000'/>
<foreignobject x='0' y='0' width='100' height='100' >
<body>
<div>manual</div>
</body>
</foreignobject>
</svg>
</svg>
</div>
我想将一个ForeignObject插入#group(最好使用jquery，因为它使操作更简单)。我试过了(代码从头开始是粗略的)
$("#group").append("<foreignobject x='0' y='0' width='100' height='100'><body><div>auto</div></body></foreignobject>")
无济于事，可能是因为“ body ”被剥夺了。我已经尝试了几种特殊的方式来创建body元素，并且尽我所能-Firebug不再使插入的foreignObject元素变灰，但是仍然不可见。
因此，要么我没有看到明显的东西，要么有一种奇怪的方法来做到这一点。
有想法吗？
更新最终解决方案
这是我想出的最短的
var foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject' );
var body = document.createElement( 'body' ); // you cannot create bodies with .apend("<body />") for some reason
$(foreignObject).attr("x", 0).attr("y", 0).attr("width", 100).attr("height", 100).append(body);
$(body).append("<div>real auto</div>");
$("#group").append(foreignObject);
最佳答案
SVG区分大小写，所需的元素名称称为foreignObject。要使用dom创建它，您会调用
document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')