SVG foreignObject no se muestra en Chrome

Tengo un elemento SVG con un foreignObject que contiene un div. Entonces en mi js hago esto:SVG foreignObject no se muestra en Chrome

$("#wrapper>svg>foreignObject>div").sparkline(data);

que crea un lienzo dentro del div. Cuando miro el código html Firebug para los dos navegador son:

Firefox:

<svg> 
    <foreignObject width="20" height="20" x="10" y="-10"> 
     <div> 
      <canvas style="display: inline-block; width: 18px; height: 19px; vertical-align: top;" width="18" height="19"></canvas> 
     </div> 
    </foreignObject> 
</svg>

Chrome:

<svg> 
    <foreignobject width="20" height="20" x="10" y="-10"/> 
<svg>

en cromo que incluso no muestran la div. La forma en que creo el div es

nodeEnter.append("foreignObject") 
    .attr("width", "20") 
    .attr("height", "20") 
    .attr("x", "10") 
    .attr("y","-10"); 

$("#wrapper>svg>foreignObject").append("<div></div>");

Firefox funciona como espero que funcione. Pero Chrome no. ¿Alguien tiene alguna sugerencia?

Además, creo que parte del problema es que el resultado HTML de chrome firebug muestra "foreignobject" pero Firefox muestra "foreignObject" de la forma en que lo agregué.

Fuente

2012-06-25 ßee

Necesita tener un cuerpo HTML como sub-elemento de foreignobject. Una vez que tienes eso, puedes poner cualquier cosa dentro del cuerpo.

Fuente

2012-07-13 13:41:39 Demosthenes

Cool @Demosthenes thanks it worked. –

Puede valer la pena actualizar esto ya que Chrome parece haber cambiado su comportamiento y el subelemento ahora tiene que ser envuelto - extrañamente a Edge no le importa de ninguna manera. No se necesita espacio de nombre para ninguno de los navegadores (pero otros pueden ser exigentes). – dav1dsm1th

Solo para agregar a la conversación, aquí hay algunas marcas. Chrome y Firefox se comportan de manera diferente y estas etiquetas de estilo eliminaron las diferencias (¿agregar a html reset?) Aparentemente no necesita un cuerpo HTML tanto como la referencia del espacio de nombres xmlns en la etiqueta, ya sea body o simplemente div. Además, es probable que desee considerar una etiqueta svg switch para probar las características compatibles.

<!doctype html><html><body> 

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="300px"> 
    <foreignObject width="100" height="57"> 
    <div xmlns="http://www.w3.org/1999/xhtml" style="position:relative; 
     width:100px;height:57px;overflow:hidden;font-family:Arial; 
     font-weight:400;font-size:12px;line-height:100%;"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing egplit, sed do eiusmod 
      tempor incididunt ut labore 
    </div> 
    </foreignObject> 
</svg> 

</body></html>

Fuente

2016-05-09 20:07:03

SVG foreignObject no se muestra en Chrome

Respuesta

Cuestiones relacionadas