可以给SVG <tspan>元素背景色吗?如果没有,那么模拟它的最佳方法是什么?
<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>
<g fill="yellow"><tspan>hello</tspan></g> <tspan><g fill="yellow">hello</g></tspan>
除了创建<rect>位于相同位置的元素(我想避免的事情)之外,还有另一种方法可以实现此目的吗?
<rect>
rect可能是做到这一点的最佳方法(假设您只处理最简单的文本形式)。
tspan在SVG 1.1中本身没有“背景”,背景是在tspan之前绘制的任何东西。有许多情况需要考虑,例如tspan在具有圆形形状的textPath内。另请注意,在所有情况下,它都不像连续矩形那样简单,由于变换,字形定位等原因,单个tspan可以倾斜,旋转并划分为多个相交和不相交的形状。
我可以想到的另一种方法是无需编写脚本即可执行此操作,但是您需要事先知道字符串的宽度(例如,使用等宽字体)。如果有的话,则可以使用Ahem字体添加另一个tspan元素,将其放置在文档中其他tspan之前,并为其赋予x,y位置与要设置“背景”的tspan相同。
否则,执行此操作的方法是通过编写脚本并添加矩形(或带有类似Ahem的字体的tspans)。