如何创build一个SVG“工具提示”像框？
给定一个现有的有效的SVG文档，创build“信息popup窗口”的最好方法是什么，所以当你hover或点击某些元素（比方说），你popup一个任意数量的盒子（即不只是一个单一的工具提示）额外的信息？
这应该至less在Firefox中正确显示，并且在图像被栅格化为位图格式时不可见。
<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> 进一步的解释可以在这里find。
这个问题在2008年被问到。在这四年间，SVG已经快速地提高了。 现在工具提示在我意识到的所有平台上都得到完全支持。 使用一个<title>标签（不是一个属性），你会得到一个本地的工具提示。
这里是文档： https ： //developer.mozilla.org/en-US/docs/SVG/Element/title
由于<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>
最后，对每个你想要有鼠标hoverfunction的元素添加：
onmousemove="ShowTooltip(evt)" onmouseout="HideTooltip(evt)" mouseovertext="Whatever text you want to show"
我在http://www.petercollingridge.co.uk/interactive-svg-components/tooltip上用改进的function写了更详细的解释;
我还没有包括多行工具提示，这将需要多个<tspan>元素和手动换行。
这应该工作：
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
