如何创建一个SVG＆＃8220;工具提示＆＃8221;类似的盒子？

StackOverflow https://stackoverflow.com/questions/102457

  •  01-07-2019
  •  | 
  •  

题

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

这应该至少在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>

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

其他提示

这个问题在2008年被提出。在过去的四年里，SVG迅速发展。现在，我所知道的所有平台都完全支持工具提示。使用＆lt; title＆gt; 标记（不是属性），您将获得原生工具提示。

以下是文档： https://developer.mozilla.org/en-US/docs/SVG /元素/标题

由于＆lt; set＆gt; 元素不适用于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 =＆quot; init（evt）＆quot; 添加到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

我还没有包含多行工具提示，这需要多个＆lt; tspan＆gt; 元素和手动换行。

这应该有效：

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
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top