svg元素层/重叠/覆盖/重叠

为了使它们可热插拔/可拖动/可扩展，我一直在研究Mike Bostock的d3示例

在这样做的过程中，我偶然发现了一个问题（使用Firefox 16.0.2，顺便说一句，对于svg来说通常很好），尽管这个问题本身并不严重，但在某种程度上困扰了我：即，尽管结果HTML中始终存在但任何试图用按钮元素覆盖矩形查看区域的尝试都失败了

我试着在交换的底部遵循每一条建议，但这些都没有效果

这里是我的基本代码，按钮显示在圆圈的包含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>

跑

不管使用了append元素，但是

• z指数
• x&y坐标
• dx&dy坐标
• 有没有身份证
• 有课还是没课
• 有无定位

…尽管按钮出现在生成的html中，但它要么继续显示在容器外部，要么根本不显示

svg覆盖似乎存在一个我并不熟悉的问题。有什么提示吗

谢谢

---

暴徒

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

您必须确保为外来内容添加了正确的命名空间。下面是一个完整的工作示例（）：

跑

你好，托马斯，谢谢你的建议。事实上，foreignObject是我尝试过的各种容器元素之一（g、div、foreignObject、svg）。我重新尝试了一下，但还是有同样奇怪的行为。考虑到尝试的广度，我开始怀疑问题超出了简单的分层或结构问题-（非常感谢，Thomas，我真的不知道我是否找到了获取此信息的方法。最重要的是，我看到它是有效的。：-）正确放置按钮的决定性因素是使用foreignObject（和requiredExtensions属性）替换svg。另一方面，xmls属性，无论是添加到顶级svg元素还是最低级别（button）div，似乎都没有影响。现在我所要做的就是找出为什么在我自己的代码中不起作用…：-）它有助于理解XML名称空间。当然，所有HTML元素必须位于HTML命名空间中，所有SVG元素必须位于SVG命名空间中。这意味着，如果您将

foreignObject

元素放在HTML名称空间中，给它

xmlns=”http://www.w3.org/1999/xhtml

，它将不会被识别为SVG的

foreignObject

元素。相反，它似乎是一个非标准的HTML元素，因为它位于HTML命名空间中。同样，如果不放置

xmlns=”http://www.w3.org/1999/xhtml

在

div

元素上，它似乎是一个非标准HTML元素。请重新阅读我的评论：当然，最后一位必须是：同样，如果您不放置

xmlns=”http://www.w3.org/1999/xhtml

在

div

元素上，它似乎是一个非标准SVG元素（因为它仍然在SVG名称空间中，就像它的周围一样）。由于我的html是由d3.js生成的（它附带了预定义的公共名称空间），所以除了requiredExtensions属性之外，显式提及其他属性似乎是不必要的。Mike Bostock已经概述了这一点：（）。

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