動態插入foreignObject爲SVG與jQuery

鑑於這個網站+ SVG動態插入foreignObject爲SVG與jQuery

<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元素的奇特方法，並且盡我所能 - 螢火蟲不會將已插入的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);

來源

2012-09-17 durilka

SVG是大小寫敏感的，你想要的元素名稱叫做foreignObject。要使用DOM創建它，你會叫

document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')

來源

2012-09-17 15:28:24

firefox和chrome都允許不區分大小寫的svg標記 - 至少上面的代碼顯示了手動定義的異物 – durilka

-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-17 15:09:08 feeela

這個相當冗長的代碼仍然顯示沒有 'VAR foreignObject =使用document.createElement（「http://www.w3.org/2000/svg」， '異物'）; foreignObject.setAttribute（「x」，「0」）; foreignObject.setAttribute（「y」，「0」）; foreignObject.setAttribute（「width」，「100」）; foreignObject.setAttribute（「height」，「100」）; var body = document.createElement（'body'）; var div = document.createElement（'div'）; var text = document.createTextNode（「auto」）; div.appendChild（text）; body.appendChild（div）; foreignObject.appendChild（body）; document.getElementById（'group'）.appendChild（foreignObject）;' – durilka

document.createElement應該是document.createElementNS –

document.CreateElementNS需要兩個參數，不僅是要創建的元素，還有'http：// www。 w3.org/2000/svg' –

動態插入foreignObject爲SVG與jQuery

回答

相關問題