如何创建一个类似SVG“工具提示”的盒子？

Given an existing valid SVG document, what's the best way to create "informational popups", so that when you hover or click on certain elements (let's say ) you popup a box with an arbitrary amount (i.e. not just a single line tooltip) of extra information?

鉴于现有的有效SVG文档,创建“信息弹出窗口”的最佳方法是什么,这样当你悬停或点击某些元素时(比方说)你弹出一个具有任意数量(即不仅仅是单行工具提示)的框。额外的信息?

This should display correctly at least in Firefox and be invisible if the image was rasterized to a bitmap format.

这应该至少在Firefox中正确显示,如果图像被栅格化为位图格式,则不可见。

4 个解决方案

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

Further explanation can be found here.

可在此处找到进一步的解释。

#2

This question was asked in 2008. SVG has improved rapidly in the intervening four years. Now tooltips are fully supported in all platforms I'm aware of. Use a <title> tag (not an attribute) and you will get a native tooltip.

这个问题在2008年被提出。在过去的四年里,SVG迅速发展。现在,我所知道的所有平台都完全支持工具提示。使用

标签(不是属性),您将获得原生工具提示。</p>

Here are the docs: https://developer.mozilla.org/en-US/docs/SVG/Element/title

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

#3

Since the <set> element doesn't work with Firefox 3, I think you have to use ECMAScript.

由于元素不适用于Firefox 3,我认为你必须使用ECMAScript。

If you add the following script element into your SVG:

如果将以下脚本元素添加到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>

You need to add onload="init(evt)" into the SVG element to call the init() function.

您需要将onload =“init(evt)”添加到SVG元素中以调用init()函数。

Then, to the end of the SVG, add the tooltip text:

然后,在SVG的末尾添加工具提示文本:

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

Finally, to each of the element that you want to have the mouseover function add:

最后,对于要使用鼠标悬停功能的每个元素添加:

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

I've written a more detailed explanation with improved functionality at http://www.petercollingridge.co.uk/interactive-svg-components/tooltip

我在http://www.petercollingridge.co.uk/interactive-svg-components/tooltip上写了一个更详细的解释和改进的功能。

I haven't yet included multi-line tooltips, which would require multiple <tspan> elements and manual word wrapping.

我还没有包含多行工具提示,这需要多个元素和手动自动换行。

#4

This should work:

这应该工作:

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

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