css - tspan元素的背景色

是否可以为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用fill包裹在<g>中(或文本本身在<g>中)也不起作用:

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

除了创建位于同一位置的<rect>元素(我想避免的事情)之外，还有另一种方法可以实现此目的吗？

最佳答案

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

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

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

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

关于css - tspan元素的背景色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8675223/