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

Question

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

mor*_*ais 39 svg popup tooltip

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

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

Answer 1

Nei*_*ser 48

这个问题在2008年被提出.在过去的四年里,SVG迅速发展.现在,我所知道的所有平台都完全支持工具提示.使用<title>标记(不是属性),您将获得本机工具提示.

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

注意:当您使用javascript动态添加它时,这似乎不起作用. (5认同)
另外，您无法设置本机工具提示的样式:( (2认同)
我在d3可视化框架中使用它来使用javascript添加工具提示,它在我最近的chrome和firefox版本中工作.代码类似于`chart.selectAll("g.cell.child").append("title").text(function(d){return d.size;});` (2认同)

Answer 2

Spa*_*arr 24

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

Run Code Online (Sandbox Code Playgroud)

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

现在已经破坏了IBM站点的链接. (4认同)
@kasuparu我刚刚向ibm发送了关于破损链接的反馈.该目录中的某些文件仍然存在,因此可能是一个错误. (2认同)

归档时间：	17 年，3 月前
查看次数：	59880 次
最近记录：	8 年，2 月前