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

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

que crea un lienzo dentro de la div. Cuando miro el código html de firebug para los dos navegadores 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>

Cromo:

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

En cromo ni siquiera muestra 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 está funcionando como espero que funcione. Pero el cromo no lo hace. ¿Alguien tiene alguna sugerencia?

Además, creo que parte del problema es que la salida HTML de Chrome Firebug muestra "foreignobject" pero Firefox muestra "foreignObject" de la forma en que lo agregué.