tspan元素的背景色

Question

可以给SVG <tspan>元素背景色吗？如果没有，那么模拟它的最佳方法是什么？

我的目标是给文本提供背景色，我发现填充<tspan>元素将是完美的-它们已经“概述” <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

rect可能是做到这一点的最佳方法（假设您只处理最简单的文本形式）。

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

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

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