如何创建类似于“工具提示”的SVG框？

Question

如何在现有有效的SVG文档中创建“信息弹出框”，使得当您悬停或点击某些元素（比如说）时，可以弹出带有任意数量（而不仅仅是单行提示）附加信息的框？

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

- morais

---

Morais，如果您能缩小问题的范围，可能会更有帮助。可以更具体地说明您可用的技术以及需要支持哪些浏览器（Firefox和其他哪些浏览器？）。这只是一个建议。 - Onorio Catenacci

现在已经过时的是被接受的答案，但 Neil Fraser 的答案仍然正确。 - Craig

Answer 1

这个问题是在2008年提出的。在随后的四年中，SVG得到了快速改进。现在所有我知道的平台都完全支持工具提示。使用<title>标签（而不是属性），您将获得本地工具提示。

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

- Neil Fraser

---

注意：当您使用JavaScript动态添加时，似乎这不起作用。 - Ben Zuill-Smith

另外，您无法为本地工具提示设置样式 :( - CpILL

我使用d3可视化框架和JavaScript添加了一个工具提示，并在最近版本的Chrome和Firefox中成功运行。代码类似于chart.selectAll("g.cell.child").append("title").text(function(d) { return d.size;} );。 - Pat

这在Firefox（50.0）中似乎可以工作，但在Chrome（54.0.2840.100）中不行。 - joelittlejohn

Answer 2

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

更多解释请查看这里。

- Sparr

---

这在Firefox 3.0.1上似乎不起作用 - 这是预期的吗？ - morais

IBM网站的链接已失效。 - kasuparu

@kasuparu 我刚向IBM发送了关于损坏链接的反馈。那个目录中的一些文件仍然存在，所以这可能是一个错误。 - Sparr

因为链接未修复而进行负投票。 - Eric Bloch

我已向IBM提交了请求，以恢复链接中删除的内容。 - Sparr

将链接更改为archive.org。 - Sparr

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>

你需要在SVG元素中添加onload="init(evt)"调用init()函数。

然后，在SVG的末尾添加工具提示文本：

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

最后，对于您想要添加mouseover功能的每个元素，请添加以下内容：

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

我已经在http://www.petercollingridge.co.uk/interactive-svg-components/tooltip上编写了更详细的说明，改进了功能。

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

- Peter Collingridge

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

- Aravind Cheekkallur