css - tspan元素的背景色

Question

是否可以给SVG <tspan>元素背景颜色？如果不是，模拟它的最佳方法是什么？

我的目标是给文本背景颜色，我想填充 <tspan>元素将是完美的——它们已经“勾勒”了代表多行文本中的行的文本 block (<tspan> 元素)。

我正在使用的示例:

<text x="100" y="100" font-size="30">
  <tspan>hello</tspan>
  <tspan x="100" dy="1.2em">world</tspan>
</text>

我试过“填充”属性，但它似乎影响文本的填充(颜色)，而不是它后面的区域:

<tspan fill="yellow">hello</tspan>

我还尝试通过 CSS 设置背景颜色:

<style type="text/css">tspan { background-color: yellow }</tspan>

..但这不起作用(至少在 Chrome 17 和 Firefox 12 中)。

将 tspan 包装在 <g> 中(或文本本身在 <g> 中)“填充”也不起作用:

<g fill="yellow"><tspan>hello</tspan></g>
<tspan><g fill="yellow">hello</g></tspan>

除了创建 <rect>元素位于同一位置——这是我想避免的——有没有其他方法可以实现这一点？

Answer 1

矩形可能是最好的方法(假设您只处理最简单的文本形式)。

在 SVG 1.1 中，tspan 本身没有“背景”，背景是在 tspan 之前绘制的任何内容。有许多情况需要考虑，例如 tspan 在具有圆形形状的 textPath 内部的情况。另请注意，它并非在所有情况下都像连续矩形那样简单，由于变换、字形定位等原因，单个 tspan 可以倾斜、旋转并分成几个相交和非相交的形状。

我可以想到另一种方法，无需编写脚本即可执行此操作，但您需要提前知道字符串的宽度(例如，通过使用等宽字体)。如果有，则可以使用 Ahem 字体添加另一个 tspan 元素，将其放在文档中其他 tspan 之前，并为其提供与要提供“背景”的 tspan 相同的 x、y 位置。

否则，执行此操作的方法是通过编写脚本并添加矩形(或带有类似 Ahem 字体的 tspan)。