是否可以提供SVG <tspan>元素背景颜色？如果没有，那么模拟它的最佳方法是什么？
我的目标是提供文本背景颜色，并且我认为填充<tspan>元素将是完美的 - 它们已经“概述”了表示多行文本中的行的文本块（<tspan>元素）。 / p>
我正在使用的例子：
<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>（或<g>中的文字本身）中包装tspan也不起作用：
<g fill="yellow"><tspan>hello</tspan></g>
<tspan><g fill="yellow">hello</g></tspan>
除了创建位于同一位置的<rect>元素 - 我想避免的事情 - 还有另一种方法可以达到这个目的吗？
答案 0 :(得分：6)
rect可能是最好的方法（假设你只处理最简单的文本形式）。
tspans在SVG 1.1中没有“背景”，背景是在tspan之前绘制的任何东西。有许多情况需要考虑，例如tspan位于具有圆形形状的textPath内。另请注意，在所有情况下，它并不像连续矩形那么简单，由于变换，字形定位等原因，单个tspan可以倾斜，旋转并分割成几个相交和不相交的形状。
我能想到的另一种方法是在没有脚本的情况下做到这一点，但是你需要提前知道字符串的宽度（例如使用等宽字体）。如果你有，那么你可以使用Ahem字体添加另一个tspan元素，将它放在文档中的另一个tspan之前，并给它与你想要给出“背景”的tspan相同的x，y位置。
否则，执行此操作的方法是通过脚本编写，添加矩形（或带有类似Ahem字体的tspans）。
答案 1 :(得分：2)
SVG不支持直接指定图像背景颜色......但您可以调整viewBox属性的四个值（复杂）。我知道这是你想要避免的东西，但CSS不会帮助你。
...或者您可以使用getBBox和getCTM ...它会为您提供旋转文本的优势。 例： http://srufaculty.sru.edu/david.dailey/svg/getCTM.svg
