¿Cómo crear un cuadro tipo "información sobre herramientas" de SVG?

Dado un documento SVG válido existente, ¿cuál es la mejor manera de crear "ventanas emergentes informativas", de modo que cuando coloca o hace clic en ciertos elementos (digamos) abre un cuadro con una cantidad arbitraria (es decir, no solo una línea de información sobre herramientas) de información adicional?¿Cómo crear un cuadro tipo "información sobre herramientas" de SVG?

Esto debería mostrarse correctamente al menos en Firefox y ser invisible si la imagen se rasterizó a un formato de mapa de bits.

Fuente

2008-09-19 morais

Morais que podría ayudar si se redujo la pregunta un poco. Tal vez un poco más específico acerca de qué tecnologías están disponibles para usted y qué navegadores necesita para apoyar (Firefox y qué más?) Sólo una sugerencia. –

La respuesta aceptada está desactualizada, pero la de Neil Fraser sigue siendo correcta. – Craig

<svg> 
    <text id="thingyouhoverover" x="50" y="35" font-size="14">Mouse over me!</text> 
    <text id="thepopup" x="250" y="100" font-size="30" fill="black" visibility="hidden">Change me 
    <set attributeName="visibility" from="hidden" to="visible" begin="thingyouhoverover.mouseover" end="thingyouhoverover.mouseout"/> 
    </text> 
</svg>

Una explicación más detallada se puede encontrar here.

Fuente

2008-09-19 21:07:58 Sparr

Esto no parece funcionar en Firefox 3.0.1, ¿se supone que debe hacerlo? – morais

Usar 'set' no funciona con Firefox 3 –

El enlace al sitio de IBM está roto ahora. – kasuparu

Dado que el elemento <set> no funciona con Firefox 3, creo que debe usar ECMAScript.

Si se añade el siguiente elemento de secuencia de comandos en su SVG:

<script type="text/ecmascript"> <![CDATA[ 

    function init(evt) { 
     if (window.svgDocument == null) { 
     // Define SGV 
     svgDocument = evt.target.ownerDocument; 
     } 
     tooltip = svgDocument.getElementById('tooltip'); 
    } 

    function ShowTooltip(evt) { 
     // Put tooltip in the right position, change the text and make it visible 
     tooltip.setAttributeNS(null,"x",evt.clientX+10); 
     tooltip.setAttributeNS(null,"y",evt.clientY+30); 
     tooltip.firstChild.data = evt.target.getAttributeNS(null,"mouseovertext"); 
     tooltip.setAttributeNS(null,"visibility","visible"); 
    } 

    function HideTooltip(evt) { 
     tooltip.setAttributeNS(null,"visibility","hidden"); 
    } 
    ]]></script>

Es necesario añadir onload="init(evt)" en el elemento SVG para llamar a la función init().

Luego, al final de la SVG, añadir el texto de sugerencia:

<text id="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>

Por último, para cada uno de los elemento que usted quiere tener la función mouseover complemento:

onmousemove="ShowTooltip(evt)" 
onmouseout="HideTooltip(evt)" 
mouseovertext="Whatever text you want to show"

I He escrito una explicación más detallada con una funcionalidad mejorada en http://www.petercollingridge.co.uk/interactive-svg-components/tooltip

Aún no he incluido información sobre herramientas de varias líneas, lo que requeriría múltiples <tspan> elementos y envoltura manual de palabras.

Fuente

2011-01-28 18:52:39

Esta pregunta se realizó en 2008. SVG ha mejorado rápidamente en los cuatro años transcurridos. Ahora los tooltips son totalmente compatibles en todas las plataformas de las que tengo conocimiento. Use una etiqueta <title> (no un atributo) y obtendrá una información sobre herramientas nativa.

Éstos son los documentos: https://developer.mozilla.org/en-US/docs/SVG/Element/title

Fuente

2012-10-15 22:11:13

Nota: Esto no parece funcionar cuando lo agrega dinámicamente mediante javascript. – bzuillsmith

Además, no se pueden diseñar sugerencias de herramientas nativas :( – CpILL

Utilicé esto con el marco de visualización d3 para agregar una información sobre herramientas utilizando javascript y me funcionó en versiones recientes de Chrome y Firefox. El código era algo así como 'chart.selectAll ("g.cell.child"). append ("título"). texto (función (d) {return d.size;}); ' – Pat

esto debería funcionar:

nodeEnter.append("svg:element") 
    .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }) 
    .append("svg:title") 
    .text(function(d) {return d.Name+"\n"+d.Age+"\n"+d.Dept;}); // It shows the tool tip box with item [Name,Age,Dept] and upend to the svg dynamicaly

Fuente

2013-08-21 08:35:16

¿Cómo crear un cuadro tipo "información sobre herramientas" de SVG?

Respuesta

Cuestiones relacionadas