是否有可能给出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中).
在< g>中包装tspan (或在< g>中使用“填充”文本本身)也不起作用：
<g fill="yellow"><tspan>hello</tspan></g> <tspan><g fill="yellow">hello</g></tspan>
除了创建一个< rect>位于同一位置的元素 – 我想避免的东西 – 还有另一种方法可以达到这个目的吗？
解决方法
rect可能是最好的方法(假设你只处理最简单的文本形式).
tspans在SVG 1.1中没有“背景”,背景是在tspan之前绘制的任何东西.有许多情况需要考虑,例如tspan位于具有圆形形状的textPath内.另请注意,在所有情况下,它并不像连续矩形那么简单,由于变换,字形定位等原因,单个tspan可以倾斜,旋转并分割成若干交叉和非交叉形状.
我可以想到的另一种方法是在没有脚本的情况下做到这一点,但是你需要事先知道字符串的宽度(例如使用等宽字体).如果你有,那么你可以使用Ahem字体添加另一个tspan元素,将它放在文档中的另一个tspan之前,并给它与你想要给出“背景”的tspan相同的x,y位置.
