svg element layer / overlap / overlay / superimposition - svg

Question

With a view to making them hot pluggable / draggable / scaleable, I've been playing around with Mike Bostock's d3 three little circles examples.
While doing this, I stumbled across an issue (using Firefox 16.0.2, btw - normally fine for svg) which, though in itself not serious, somehow bugs me: namely that though always present in the resulting HTML, any attempt at overlaying the rectangular viewing area with the button element fails.
I've tried following each piece of advice at the foot of this exchange, but these have had no impact.
Here my base code, whereby the button is shown outside the circle's containing svg view area. The groupings are part of preparations for experiments with drag n drop / scalability:
var root = d3.selectAll("g#tool-2");
var g0 = root
.append("g")
.attr("class", "g0")
.attr("id", function (d, i) { return d.tool});
var g01 = g0
.append("g")
.attr("class", "g01")
.attr("id", function (d, i) { return d.tool});
var g02 = g0
.insert("g")
.attr("class", "g02")
.attr("id", function (d, i) { return d.tool});
var svg = g01
.insert("svg")
.attr("width", width)
.attr("height", height);
var button = g02
.append("div")
.attr("class", "button")
.attr("id", function (d, i) { return d.tool})
.append("button")
.text(function(d) { return "Run" });
svg.selectAll(".little")
.data(data)
.enter()
.append("circle")
.attr("class", "little")
.attr("cx", x)
.attr("cy", y)
.attr("r", 12);
console.log("Got past circle creation");
button
.on("click", function() {
svg.selectAll(".select").remove();
svg.selectAll(".select")
.data(data)
.enter()
.append("circle")
.attr("class", "select")
.attr("cx", x)
.attr("cy", y)
.attr("r", 60)
.style("fill", "none")
.style("stroke", "red")
.style("stroke-opacity", 1e-6)
.style("stroke-width", 3)
.transition()
.duration(750)
.attr("r", 12)
.style("stroke-opacity", 1);
});
Appended to any of root, g0, g01 or g02, the button is shown outside the rectangular container. All well and good. Here, for example, the html resulting from the code shown above:
<g id="tool-2" class="g0">
<g id="tool-2" class="g01">
<svg height="180" width="360">
<circle r="12" cy="45" cx="180" class="little"></circle>
<circle r="12" cy="90" cx="60" class="little"></circle>
<circle r="12" cy="135" cx="300" class="little"></circle>
<circle style="fill: none; stroke: red; stroke-opacity: 1; stroke-width: 3;" r="12" cy="45" cx="180" class="select"></circle>
<circle style="fill: none; stroke: red; stroke-opacity: 1; stroke-width: 3;" r="12" cy="90" cx="60" class="select"></circle>
<circle style="fill: none; stroke: red; stroke-opacity: 1; stroke-width: 3;" r="12" cy="135" cx="300" class="select"></circle>
</svg>
</g>
<g id="tool-2" class="g02">
<div id="tool-2" class="button">
<button>Run</button>
</div>
</g>
</g>
Regardless of append element used, however, whether using
z-index
x & y coordinates
dx & dy coordinates
with or without id
with or without class
with or without positioning
..the button, though present in the resulting html, either continues to be shown outside the container, or is simply not displayed.
There seems to be an issue with svg overlaying with which I'm really not familiar. Any hints?
Thanks
Thug

Answer 1

As far as I can see you're mixing HTML elements into SVG. That's not valid. You can wrap the HTML elements in a <foreignObject> element and see if you're more lucky with that.
You have to make sure that the proper namespace for the foreign content is added. Here is a complete working example (try on jsfiddle):
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<g class="g0">
<g class="g01">
<svg height="180" width="360">
<circle r="12" cy="45" cx="180" class="little"></circle>
<circle r="12" cy="90" cx="60" class="little"></circle>
<circle r="12" cy="135" cx="300" class="little"></circle>
<circle style="fill: none; stroke: red; stroke-opacity: 1; stroke-width: 3;" r="12" cy="45" cx="180" class="select"></circle>
<circle style="fill: none; stroke: red; stroke-opacity: 1; stroke-width: 3;" r="12" cy="90" cx="60" class="select"></circle>
<circle style="fill: none; stroke: red; stroke-opacity: 1; stroke-width: 3;" r="12" cy="135" cx="300" class="select"></circle>
</svg>
</g>
<g class="g02">
<foreignObject width="100" height="50">
<div class="button" xmlns="http://www.w3.org/1999/xhtml">
<button>Run</button>
</div>
</foreignObject>
</g>
</g>
</svg>