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可能是最好的方法(假设你只处理最简单的文本形式).

tspans在SVG 1.1中没有"背景",背景是在tspan之前绘制的任何东西.有许多情况需要考虑,例如tspan位于具有圆形形状的textPath内.另请注意,在所有情况下,它并不像连续矩形那么简单,由于变换,字形定位等原因,单个tspan可以倾斜,旋转并分割成若干交叉和非交叉形状.

我可以想到的另一种方法是在没有脚本的情况下执行此操作,但是您需要事先知道字符串的宽度(例如,使用等宽字体).如果你有,那么你可以使用Ahem字体添加另一个tspan元素,将它放在文档中的另一个tspan之前,并给它与你想要给出"背景"的tspan相同的x,y位置.

否则,执行此操作的方法是通过脚本编写,并添加矩形(或具有类似Ahem字体的tspans).