Con miras a que ellos pueden conectar en caliente /draggable /escalable, he estado jugando con Mike Bostock del d3 tres pequeños círculos ejemplos.

Mientras se hace esto, me topé con un problema (usando Firefox 16.0.2, por cierto, – normalmente bien para svg) que, aunque en sí mismo no es grave, de alguna manera me molesta: es decir, que a pesar de que siempre está presente en el código HTML resultante, cualquier intento de la superposición de rectangular área de visualización con el botón elemento falla.

He intentado siguiendo cada uno de los consejos al pie de este de cambio, pero estos no han tenido ningún impacto.

Aquí mi código de base, mediante el cual el botón se muestra fuera del círculo que contiene svg área de la vista. Las agrupaciones son parte de los preparativos para los experimentos con arrastrar y soltar /escalabilidad:

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

Anexa a cualquier de raíz, g0, o g01 g02, el botón se muestra fuera del contenedor rectangular. Todo bien y bueno. Aquí, por ejemplo, el código html resultante de el código mostrado arriba:

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

Independientemente de anexar elemento que se utiliza, sin embargo, si el uso de

  • z-index
  • x & y las coordenadas
  • dx & dy coordenadas
  • con o sin id
  • con o sin clase
  • con o sin posicionamiento

..el botón, aunque presente en el código html resultante, continúa a ser mostrado en el exterior del envase, o simplemente no se muestra.

No parece ser un problema con svg superponer con la que no estoy muy familiarizado. Cualquier sugerencias?

Gracias
Thug

InformationsquelleAutor user1019696 | 2012-11-29

1 Comentario

  1. 2

    Tan lejos como puedo ver que usted es la mezcla de elementos HTML en SVG. Que no es válida. Usted puede ajustar los elementos HTML de una <foreignObject> elemento y ver si tienes más suerte con eso.

    Usted tiene que asegurarse de que el propio espacio de nombres para el extranjero se añade el contenido. Aquí es un completo ejemplo de trabajo (intente en 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>
    • Hola Tomás, Gracias por tu sugerencia. foreignObject de hecho, era uno de una variedad de elementos del contenedor he probado (g, div, foreignObject, svg). Le he dado un nuevo intento, pero conseguir el mismo comportamiento extraño. Dada la amplitud de los intentos, empiezo a sospechar que el problema va más allá de la cuestión de simple capas o estructura. 🙁
    • He añadido un ejemplo de trabajo. ¿Eso ayuda?
    • Muchas gracias, Thomas, la verdad, no sé si me hubiera encontrado mi camino a esta información. Por encima de todo, veo que funciona. 🙂 Decisivo para la correcta colocación del botón es el reemplazo de svg con foreignObject (y requiredExtensions atributo). Por otro lado, los xmls de atributo, ya sea añadido a la parte superior de nivel de elemento svg, o el nivel más bajo (botón) div parece tener ningún impacto. Ahora todo lo que tengo que hacer es averiguar por qué esto no funciona en mi propio código… 🙂
    • Ayuda a tener una comprensión de los espacios de nombres XML. Por supuesto, todos los elementos HTML tienen que estar en el código HTML de espacio de nombres, y todos los elementos SVG tiene que ser en el SVG espacio de nombres. Esto significa que, si se pone el foreignObject elemento en el código HTML de espacio de nombres, dando xmlns="http://www.w3.org/1999/xhtml, no será reconocido como SVG del foreignObject elemento. En cambio, parece ser un no-estándar elemento HTML porque es en el código HTML de espacio de nombres. Del mismo modo, si usted no pone xmlns="http://www.w3.org/1999/xhtml en el div elemento, parece ser un elemento HTML.
    • Acabo de volver a leer mi comentario: por supuesto, el final poco tiene que leer: del mismo modo, si usted no pone xmlns="http://www.w3.org/1999/xhtml en el div elemento, parece ser un no-estándar SVG elemento (porque todavía en el SVG espacio de nombres, como los de su entorno).
    • Como mi html es generado por d3.js (el que viene con el común de los espacios de nombres predefinidos), la mención explícita de todos, pero la requiredExtensions atributo parecer innecesaria. Esto ha sido descrito por Mike Bostock: (groups.google.com/forum/?fromgroups=#!tema/d3-js/4pOdrFpgjTo).
    • Esto funciona en Firefox pero no en Chrome o Safari… ¿alguna idea de cómo puedo conseguir un trabajo?
    • He quitado el requiredExtension atributo, y ahora parece que funciona! Usted puede confirmar eso?
    • Ahora funciona en Chrome y Firefox, pero no IE 10… yo no tengo acceso a la prueba en Safari ahora. No estoy seguro de si en la versión anterior funcionaba en IE 10, yo no puedo recordar lo que el requiredExtension atributo.
    • No estoy seguro de si será capaz de obtener, es decir, a trabajar en absoluto. No sé cómo uno debe leer esta página de MSDN que dice «La foreignObject elemento no es compatible.» Caniuse reclamaciones de la IE apoya foreignObject parcialmente.

Dejar respuesta

Please enter your comment!
Please enter your name here