如何创build一个SVG“工具提示”像框?

给定一个现有的有效的SVG文档,创build“信息popup窗口”的最好方法是什么,所以当你hover或点击某些元素(比方说),你popup一个任意数量的盒子(即不只是一个单一的工具提示)额外的信息?

这应该至less在Firefox中正确显示,并且在图像被栅格化为位图格式时不可见。

4 Solutions collect form web for “如何创build一个SVG“工具提示”像框?”

<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写了更详细的解&#x91CA;

我还没有包括多行工具提示,这将需要多个<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 
  • 在Python中将SVG转换为PNG
  • 透明空心或切出圈
  • SVG / XML中有一些innerHTMLreplace吗?
  • SVG图标与现代网站中的PNG图标
  • 使用D3更新SVG元素Z索引
  • 如何使用Image Magick将SVG转换为PNG?
  • 如何在D3图表的标签中包含换行符?
  • 循环百分比进度条
  • 重叠的CSS 1个div的圈子
  • SVG获取文本元素的宽度
  • svg viewBox属性