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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Soweit ich sehen kann du bist das mischen von HTML-Elementen in SVG. Das ist nicht gültig. Sie können wickeln Sie die HTML-Elemente in einem
<foreignObject>
- element und sehen, wenn Sie mehr Glück mit, dass.Müssen Sie sicherstellen, dass die richtigen namespace für die fremden Inhalte Hinzugefügt. Hier ist ein vollständiges Beispiel (versuchen Sie, auf jsfiddle):
Ich fügte hinzu, ein funktionierendes Beispiel. Hilft das?
Vielen Dank, Thomas, ich weiß wirklich nicht, ob ich hätte meinen Weg gefunden, um diese Informationen. Vor allem, ich sehe, dass es funktioniert. 🙂 Entscheidend für die korrekte Platzierung der Taste ist der Ersatz von svg mit foreignObject (und requiredExtensions-Attribut). Auf der anderen Seite, die xmls Attribut, sei Hinzugefügt, um die top-level-svg-element, oder auf der niedrigsten Ebene (Schaltfläche) div scheint keinen Einfluss haben. Alles was ich jetzt noch zu tun ist, um herauszufinden, warum dies nicht funktioniert hat in meinem eigenen code... 🙂
Es hilft, um ein Verständnis der XML-namespaces. Natürlich, alle HTML-Elemente im HTML-Namensraum, und alle SVG-Elemente im SVG namespace sein. Dies bedeutet, dass, wenn man die
foreignObject
- element im HTML-Namensraum, indem esxmlns="http://www.w3.org/1999/xhtml
werden, wird es nicht erkannt und als SVG ' sforeignObject
element. Vielmehr scheint es sich um eine nicht-standard-HTML-element, weil es im HTML-Namensraum. Ebenso, wenn Sie nicht setzenxmlns="http://www.w3.org/1999/xhtml
auf diediv
element, es scheint sich um ein nicht-standard-HTML-element.Nur re-Lesen Sie mein Kommentar: natürlich ist das Letzte bit ist zu Lesen: Ebenso, wenn Sie nicht setzen
xmlns="http://www.w3.org/1999/xhtml
auf diediv
element, es scheint sich um ein non-standard SVG - element (weil es immer noch in der SVG-Namensraum, wie seine Umgebung).InformationsquelleAutor Thomas W