Холст HTML5 в элементе SVG с jQuery

Мне нужно вставить холст в элемент SVG. Мне нужен холст в SVG, потому что я использую d3js, который использует спарклайны SVG и jquery, которые создают холст. Есть ли способ сделать график спарклайнов частью элемента svg? Я попытался нарисовать график с помощью спарклайнов в SVG, но возвращает c.innerHTML undefined.

Спасибо!


javascript html jquery html5-canvas jquery-svg
person ßee    schedule 22.06.2012    source источник
comment
Используйте <foreignElement> для создания XHTML <body> в SVG, а затем добавьте к нему <canvas>. Или вставьте SVG в X/HTML и найдите расположение элементов SVG в координатах HTML так что вы можете абсолютно позиционировать <canvas> из основного HTML вместе с SVG.   -  person Phrogz    schedule 22.06.2012
comment
Вау, большое спасибо, Фрогз! Ваше решение сработало :)   -  person ßee    schedule 22.06.2012
comment
Я впечатлен тем, что этой информации было достаточно, чтобы вы могли продолжить; Я предполагал, что этого не будет, и поэтому не назвал это полным ответом. Рад, что помог :)   -  person Phrogz    schedule 22.06.2012
comment
Привет, @Phrogz, решение работает в Firefox 13, но не в Firefox 4 или последних версиях Chrome и Safari. Я просматривал журналы firebug, и открывающий тег div не создается. У вас есть предложения?   -  person ßee    schedule 23.06.2012

Ответы (1)


arrow_upward
2
arrow_downward

Пожалуйста, обратитесь к комментарию Phrogz под вопросом. Я просто ставлю это как ответ, чтобы закрыть ветку. Ответ на мою проблему заключался в том, что мне нужен элемент в моем SVG для размещения тега html, такого как div. Этот элемент div был необходим для холста, который генерирует спарклайн.

Так что я просто должен был добавить это

svgObj.append("foreignObject")
  .attr("width", "20")
  .attr("height", "20")
  .append("xhtml:div");

Затем для спарклайна я просто указал его на div постороннего объекта, и теперь у меня есть холст в SVG :)

Спасибо Прогз!

person ßee    schedule 22.06.2012