如何创建一个SVG“工具提示”般的盒子？(How to create an SVG “tooltip

鉴于现有的有效SVG文件，什么是打造“信息弹出窗口”的最好办法，所以，当你将鼠标悬停或单击某些元素（比方说）你弹出一个框，任意金额（即不只是一个单一的线提示）的额外的信息？

这应当至少在Firefox正确显示并且如果图像被光栅化为位图格式是不可见的。

Answer 1:

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

进一步的解释可以发现在这里 。

Answer 2:

这个问题被问在2008年SVG一直在干预4年迅速提高。 现在，提示在我所知道的所有平台的全面支持。 使用<title>标签（而不是属性），你会得到一个本地提示。

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

Answer 3:

由于<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>元件和手动自动换行。

Answer 4:

这应该工作：

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

文章来源: How to create an SVG “tooltip”-like box?