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

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

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

  • 命中testingSVG形状?
  • 透明空心或切出圈
  • 如何在D3.js中响应屏幕/浏览器大小制作强制布局graphics
  • 将标签放置在d3.js中的节点的中心
  • 使用HTML5和iPad捕获签名
  • 如何在网页中使用.svg文件?
  • 如何将PNG图像转换为SVG?
  • 如何访问与D3 SVG对象相关的DOM元素?
  • 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