Ich habe ein SVG-Element mit einem foreignObject, das ein div enthält. Dann mache ich in meinem js Folgendes:

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

das schafft eine Leinwand innerhalb der div. Wenn ich mir den Firebug-HTML-Code für die beiden Browser ansehe, sind das:

Feuerfuchs:

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

Chrom:

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

In Chrom zeigt es nicht einmal die div. Die Art, wie ich das Div erstelle, ist

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

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

Firefox funktioniert so, wie ich es erwartet habe. Aber Chrom macht das nicht. Hat jemand irgendwelche Vorschläge?

Ich denke auch, dass ein Teil des Problems darin besteht, dass in der HTML-Ausgabe des Chrome-Firebugs "foreignobject" angezeigt wird, in Firefox jedoch "foreignObject", wie ich es angehängt habe.