一般来说,图表中不宜存在过多文字。但是,有时需要一些文字来描述某些图形元素。那么,可以实现一种交互:当用户鼠标滑到某图形元素时,出现一个提示框,里面写有描述文字。这是一种简单、普遍的交互式,几乎适用于所有图表。通过可给提示框定制外观,能给用户带来很好的体验。
1. 提示框的制作思路
提示框,就是“文字”加“边框”。显示文字,一般来说用 SVG 的<text>,但是,有两个问题:
- 如果字符串过长,<text>元素不能自动换行,虽然可以通过<text>的子元素<tspan>来模拟自动换行的功能,但是很麻烦。
- <text>是SVG的元素。也就是说,<text>是“图形”而非“文字”,它与SVG中的<circle>、<line>、<path>等元素本质上是一样的。那么,当输出SVG图形时,<text>也会作为图形的一部分输出。
因此,SVG的<