У меня есть элемент SVG с foreignObject, который содержит div. Затем в моем JS я делаю это:

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

который создает холст внутри div. Когда я смотрю на HTML-код Firebug для двух браузеров:

Fire Fox:

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

Хром:

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

В хроме это даже не показывает div. То, как я создаю div - это

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

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

Firefox работает так, как я ожидаю. Но хрома нет. У кого-нибудь есть предложения?

Кроме того, я думаю, что отчасти проблема в том, что в выводе chrome firebug HTML отображается «Foreignobject». но Firefox показывает «ForeignObject» как я добавил.