svg元素层/重叠/重叠/叠加

Question

为了使其热插拔/可拖/可缩放，我一直在使用Mike的d3 三个小圆圈示例。

在这样做的时候，我偶然发现了一个问题(使用Firefox16.0.2，顺便说一句--对svg来说通常不错)，这个问题虽然本身并不严重，但不知怎么地让我感到烦恼:即，尽管总是出现在最终的中，但是任何试图用按钮元素覆盖矩形视图区域的尝试都失败了。

我试着在这交换的基础上遵循每一条建议，但这些都没有影响。

这里是我的基本代码，该按钮显示在外部，圆圈中包含svg视图区域。分组是准备拖放/可伸缩性实验的一部分：

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);
});

附加到的任何根，g0，g01或g02的，按钮显示在矩形容器之外。一切都很好。例如，在这里，由上面显示的代码生成的html：

<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>

但是，不管所使用的追加元素是什么，是否使用

• Z-指数
• X&y坐标
• dx & dy坐标
• 有或没有id
• 有或没有课
• 有或没有定位

..the按钮，尽管存在于生成的html中，但它继续显示在容器之外，或者根本不显示。

似乎有一个问题的svg覆盖，我真的不熟悉。有什么暗示吗？

谢谢Thug

Answer 1

据我所见，您正在将HTML元素混合到SVG中。那是无效的。您可以将HTML元素包装在一个元素中，看看您是否比较幸运。

您必须确保为外部内容添加了适当的命名空间。下面是一个完整的工作示例(试试看)：

<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>