Можно ли добавить div в элемент SVG?

Я пытаюсь добавить HTML-div внутри SVG, который я пытаюсь создать график. Я пытаюсь добавить его, используя приведенный ниже код, но когда я проверяю элемент с помощью Firebug, div показывается внутри кода rect элемента, но не отображается в графическом интерфейсе.

Что-то не так с методом, который я пробую, или невозможно добавить div в SVG?

    marker.append("rect")
   .attr("width", "50px")
   .attr("height", "50px")
   .append("div")
   .attr("id", function(d) {
      return "canvas_" + d.key.split(" ").join("_");
   })
   .style("width", "50px").style("height", "50px");

Ответы

Ответ 1

Вы не можете добавить HTML в SVG (технически вы можете с foreignObject, но это кроличья дыра). Кроме того, видимые элементы в SVG не могут быть вложенными, поэтому такие элементы, как circle, rect, path и т.д., Не могут иметь дочерние элементы.

Ответ 2

Я бы также рассмотрел использование элемента <g>, поскольку он выполняет аналогичную задачу, как <div>, группируя объекты. Подробнее об этом здесь.

Ответ 3

Вы пытаетесь добавить "rect", а также "div" в той же строке. Потрясающе это то, где вы терпите неудачу Посмотрите эти тутоники на D3... Его потрясающая библиотека, основанная на SVG http://alignedleft.com/tutorials/d3/drawing-svgs/