tspan元素的背景颜色

是否可以给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）。这是我想 - 从创建位于同一位置<rect>元素除了

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

：在<g>

包装TSPAN（或<g>文本本身）与“补”不工作，要么避免 - 是否有另一种方法来实现这一目标？

2011-12-30 kangax

一个矩形可能是最好的方法（假设你只是处理最简单的文本形式）。

在SVG 1.1中，tspans本身没有“背景”，背景是在tspan之前绘制的任何东西。有许多情况需要考虑，例如tspan在具有圆形形状的textPath中的情况。另外请注意，这不是在所有情况下，连续矩形作为简单的，单一的TSPAN可倾斜，旋转和划分成若干交叉和非交叉的形状由于变换，字形定位等

还有另外一种方式我可以想到没有脚本就可以做到这一点，但是你需要事先知道字符串的宽度（例如使用等宽字体）。如果你有，那么你可以使用Ahem字体添加另一个tspan元素，将它放在文档中的另一个tspan之前，并为它赋予与你想给出“背景”的tspan相同的x，y位置。

否则，要做到这一点的方法是通过脚本，并添加矩形（或类似Ahem的字体的tspans）。

2011-12-30 14:18:58

谢谢，我会和rect一起去的。我现在可以看到为什么指定文本背景可能会有问题。 – kangax 2011-12-31 11:58:00

SVG不支持直接指定图像背景颜色...但您可以调整viewBox属性（复杂）的四个值。我知道这是你想避免的，但CSS不会帮助你。

...或者你可以使用getBBox和getCTM ...它会给你旋转文字的优点。例如： http://srufaculty.sru.edu/david.dailey/svg/getCTM.svg

2011-12-30 10:55:37 Alex

SVG确实允许在根svg元素上使用“背景”，而在SVG Tiny 1.2中也有“视口填充”和“视口不透明度”。但是确实没有任何东西会自动填充tspan，你必须使用脚本来完成。我不明白为什么'viewBox'会适用于此。 – 2011-12-30 12:14:23

@Erik，一般来说，浏览器支持Tiny有多强大？ – Alex 2011-12-31 06:32:50

一般？有些部分是支持的，有些则不是:)'viewport-fill'目前还没有得到广泛支持（Opera支持它），但还有其他一些事情正在获得牵引力，比如'矢量效应'和'可重点“，这是在多个浏览器引擎中支持的。 – 2012-01-01 01:28:44

回答