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 要素を作成するためのいくつかの風変わりな方法を試しましたが、できる限り最善の方法を試しました。

明らかな何かが見えないか、それを行うための奇妙な方法があります。

アイデア？

最終的な解決策で更新 これは私が思いついたものの最短です

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 ドキュメントにはあまり適していません。

ただし、jQuery に関連してプレーンな JS を使用することもできます。

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

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

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