svg-element layer / überlagern / overlay / überlagerung

So, dass Sie hot-Plug - /verschiebbare /skalierbare, ich habe das Spiel mit Mike Bostock d3 drei kleine Kreise Beispiele.

Während dies zu tun, stolperte ich über ein Problem (mit Firefox 16.0.2, btw - in der Regel gut für svg), die, obwohl in sich selbst nicht ernst, irgendwie nervt mich: nämlich, dass, obwohl immer in der resultierenden HTML-Code, ist jeder Versuch überlagerung die rechteckigen Anzeigebereich mit der Taste element ausfällt.

Habe ich versucht, nach jedem Ratschlag am Fuße des diese exchange, aber diese hatten keine Auswirkungen.

Hier meine Basis-code, wobei der Schaltfläche angezeigt außerhalb der Kreis mit svg view-Bereich. Die Gruppierungen sind Teil der Vorbereitungen für Experimente mit drag n drop /Skalierbarkeit:

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

Angehängt alle von Wurzel -, g0, g01 oder g02, wird die Schaltfläche angezeigt wird, die außerhalb des rechteckigen Behälter. Alles schön und gut. Hier, zum Beispiel, die html -, die aus den oben angezeigten code ein:

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

Unabhängig von append-element verwendet werden, jedoch, ob mit

  • z-index
  • x & y-Koordinaten
  • dx & dy Koordinaten
  • mit oder ohne id
  • mit oder ohne Klasse
  • mit oder ohne Positionierung

..die-Taste, wenn präsentieren in der resultierenden html -, entweder weiterhin gezeigt werden, das außerhalb des Behälters, oder wird einfach nicht angezeigt.

Scheint es ein Problem mit der svg-überlagerung, mit der bin ich wirklich nicht vertraut. Irgendwelche Tipps?

Dank
Thug

InformationsquelleAutor user1019696 | 2012-11-29

Schreibe einen Kommentar