insertar dinámicamente foreignObject en SVG con 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>

me gustaría insertar un foreignObject en #group (preferiblemente con jquery, porque hace a la manipulación más simple). He tratado (código es dudoso desde la cabeza)

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

en vano probablemente porque "cuerpo" se despojó. He intentado varias formas exóticas de crear el elemento del cuerpo y lo mejor que he podido: Firebug ya no grisiza el elemento foreignObject insertado, pero aún no está visible.

Así que o no estoy viendo algo obvio o hay una manera extraña de hacerlo.

Ideas?

de actualización con solución final Este es el más corto de lo que me ocurrió con

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);

Fuente

2012-09-17 durilka

SVG mayúsculas y minúsculas y el nombre del elemento que desea se llama foreignObject. Para crearlo usando el DOM que llamarían

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

Fuente

2012-09-17 15:28:24

Tanto Firefox como Chrome permiten etiquetas svg insensibles a las mayúsculas y minúsculas: al menos el código anterior muestra un objeto extraño definido manualmente – durilka

-1

jQuery no está bien adaptado para los documentos SVG.

Pero todavía se podría utilizar JS de civil en relación con jQuery:

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

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

document.getElementById('group').appendChild(foreignObject);

Fuente

2012-09-17 15:09:08 feeela

esta pieza bastante detallado del código todavía no muestra nada 'var = foreignObject document.createElement ('http://www.w3.org/2000/svg', 'objeto extraño'); foreignObject.setAttribute ("x", "0"); foreignObject.setAttribute ("y", "0"); foreignObject.setAttribute ("ancho", "100"); foreignObject.setAttribute ("altura", "100"); var body = document.createElement ('body'); var div = document.createElement ('div'); var text = document.createTextNode ("auto"); div.appendChild (texto); body.appendChild (div); foreignObject.appendChild (cuerpo); document.getElementById ('group') .appendChild (foreignObject); ' – durilka

document.createElement debe ser document.createElementNS –

document.CreateElementNS requiere dos argumentos, no solo el elemento que desea crear sino también 'http: // www. w3.org/2000/svg ' –

insertar dinámicamente foreignObject en SVG con jquery

Respuesta

Cuestiones relacionadas