如何创建类似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屋！