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

Question

为了让它们成为热插拔/可拖动/可缩放的，我一直在玩Mike Bostock的d3 three little circles示例。

，而这样做，我碰到一个问题（使用Firefox 16.0.2，顺便说一句 - 通常罚款SVG）偶然发现这虽然本身并不严重，莫名其妙的错误我：即虽然总是出现在生成的HTML，任何尝试在覆盖矩形可视区域与按钮元素失败。

我试过以下每条建议在this交换的脚下，但这些都没有影响。

这里我的基本代码，其中按钮显示外部圆的包含svg视图区域。的分组是准备与拖n个墨滴/可扩展性的实验的一部分：

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覆盖与我真的不熟悉的问题。任何提示？

感谢 暴徒

Answer 1

至于我可以看到你混合HTML元素融入SVG。这是无效的。你可以将HTML元素封装在<foreignObject> element中，看看你是否更幸运。

您必须确保已添加适用于外部内容的适当名称空间。这是一个完整的工作示例（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>