Is it possible to append a div inside an SVG eleme

Question

I am trying to append an HTML div inside an SVG, which I am trying to create a graph. I am trying to append it using the code below, but when I inspect element using Firebug, the div is shown inside rect element code, but it doesn't show up in the graph UI.

Is it something wrong with the method that I am trying or is it impossible to append a div inside an 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");

Answer 1

You are trying to append "rect" as well as "div" in the same line. Porbably that is where you are failing Check out these tutotials for D3... Its an amazing library based on SVG http://alignedleft.com/tutorials/d3/drawing-svgs/

Answer 2

You can't append HTML to SVG (technically you can with foreignObject, but it's a rabbit hole). Furthermore, visible elements in SVG can't be nested, so elements such as circle, rect, path and such can't have children elements.

Answer 3

I would also consider using <g> element as it serves similar purpose as <div> by grouping objects. More about it here.