Внешний объект SVG не отображается в Chrome

у меня есть элемент SVG с внешним объектом, который содержит div. Затем в моем js я делаю это:

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

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

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>

В chrome он даже не показывает div. Как я создаю div,

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

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

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

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