如何创建一个类似于 SVG 的“工具提示"框? [英] How to create an SVG "tooltip"-like box?

问题描述

给定一个现有的有效 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?

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

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

推荐答案

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

这篇关于如何创建一个类似于 SVG 的“工具提示"框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！