为了使它们成为可热插拔/可拖动/可缩放的,我一直在玩Mike Bostock的d3 three little circles示例。
在这样做的时候,我偶然发现了一个问题(使用Firefox 16.0.2,顺便说一下 - 通常对svg来说很好)虽然本身并不严重,但不知何故让我感到困惑:即虽然总是存在于生成的HTML中,但任何尝试使用按钮元素覆盖矩形查看区域失败。
我已尝试在this交易所的脚下遵循每条建议,但这些建议没有任何影响。
这是我的基本代码,其中按钮在外面显示包含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);
});
附加到root,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>
无论使用哪个附加元素,是否使用
..按钮虽然出现在生成的HTML 中,但仍然会在容器外显示,或者根本不会显示。
svg覆盖似乎存在一个我真的不熟悉的问题。任何提示?
由于 暴徒
答案 0 :(得分:2)
据我所知,你正在将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>