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>

不能工作的..but (至少在Chrome17和Firefox12中)。

在<g> (或<g>中的文本本身)中使用"fill“对tspan进行包装也不起作用：

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

除了在同一位置创建一个<rect>元素--这是我想要避免的--还有其他方法可以实现这一点吗？

Answer 1

rect可能是最好的方法(假设您只处理最简单的文本形式)。

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

我还能想到另一种不用脚本就能做到这一点的方法，但是你需要提前知道字符串的宽度(比如使用等宽字体)。如果你有，那么你可以添加另一个tspan元素，将它放在文档中的另一个tspan之前，并给它与你想要给它一个“背景”的tspan相同的x，y位置。

否则，实现这一点的方法就是编写脚本，并添加矩形(或带有类似嗯的字体的tspan)。

Answer 2

SVG不支持直接指定图像背景color...but，可以调整viewBox属性的四个值(复杂)。我知道这是你想要避免的事情，但是CSS帮不了你。

对于旋转文本，您可以使用getBBox和getCTM...it，这将给您带来优势。示例：http://srufaculty.sru.edu/david.dailey/svg/getCTM.svg