10

鉴于这个 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>

我想在#group 中插入一个foreignObject（最好使用jquery，因为它使操作更简单）。我试过（代码从头开始很粗略）

$("#group").append("<foreignobject x='0' y='0' width='100' height='100'><body><div>auto</div></body></foreignobject>")

无济于事可能是因为“身体”被剥夺了。我已经尝试了几种创建 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);
4

2 回答 2

6

SVG 区分大小写，您想要的元素名称称为 foreignObject。要使用您将调用的 dom 创建它

document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')
于 2012-09-17T15:28:24.717 回答
-1

jQuery 不太适合 SVG 文档。

但是你仍然可以将纯 JS 与 jQuery 结合使用：

var foreignObject = document.createElement( 'foreignobject' );

/* add further child elements and attributes to foreignObject */

document.getElementById( 'group' ).appendChild( foreignObject );
于 2012-09-17T15:09:08.543 回答