如何创建一个SVG“工具提示”框？

鉴于现有的有效SVG文档，创建“信息弹出窗口”的最佳方式是什么，以便当您悬停或点击某些元素时（比方说）您弹出一个任意数量的框（即，不仅仅是单个工具提示）的额外信息？如何创建一个SVG“工具提示”框？

这应该至少在Firefox中正确显示，并且如果图像被栅格化为位图格式，它将不可见。

2008-09-19 morais

莫赖斯，如果你缩小问题的一点可能会有所帮助。也许关于哪些技术可用以及需要支持哪些浏览器（Firefox和其他内容？）更具体一些？只是一个建议。 – 2008-09-19 15:27:23

接受的答案现在已过时，但Neil Fraser的答案仍然正确。 – Craig 2014-12-21 23:39:26

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

进一步的解释可以找到here。

来源

2008-09-19 21:07:58 Sparr

这似乎并不适用于Firefox 3.0.1 - 它应该是？ – morais 2008-09-22 15:01:39

由于<set>元素不适用于Firefox 3，我认为您必须使用ECMAScript。

如果添加下面的脚本元素到您的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>

您需要添加onload="init(evt)"到SVG元素调用init（）函数。

随后，向SVG的结尾，添加工具提示文本：

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

最后，每一个元素，你想拥有的鼠标悬停功能添加：

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

我已经用改进的功能写了更详细的解释http://www.petercollingridge.co.uk/interactive-svg-components/tooltip

我还没有包含多行工具提示，这将需要多个<tspan>元素和手动词包装。

来源

2011-01-28 18:52:39

2008年提出了这个问题。在这四年的时间里，SVG已经迅速提高。现在，我意识到所有平台都完全支持工具提示。使用<title>标记（而不是属性），您将获得原生工具提示。

下面是文档： https://developer.mozilla.org/en-US/docs/SVG/Element/title

来源

2012-10-15 22:11:13

这应该工作：

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

来源

2013-08-21 08:35:16

如何创建一个SVG“工具提示”框？

回答

相关问题