tspan 元素的背景色 [英] Background color of tspan element

问题描述

是否可以为 SVG 元素提供背景颜色?如果没有，模拟它的最佳方法是什么?

Is it possible to give SVG <tspan> element background color? If not, what would be the best way to simulate it?

我的目标是给文本背景颜色，我认为填充 <tspan> 元素会很完美——它们已经勾勒"出文本块 (<tspan>code> 元素)表示多行文本中的行.

My goal is to give text background color, and I figured that filling <tspan> elements would be perfect — they already "outline" text chunks (<tspan> elements) that represent lines in multiline text.

我正在使用的示例:

<text x="100" y="100" font-size="30">
  <tspan>hello</tspan>
  <tspan x="100" dy="1.2em">world</tspan>
</text>

我尝试了fill"属性，但它似乎影响文本的填充(颜色)，而不是它后面的区域:

I tried "fill" attribute but it seems to affect fill (color) of text, not the area behind it:

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

我也尝试通过 CSS 设置背景颜色:

I also tried setting background-color via CSS:

<style type="text/css">tspan { background-color: yellow }</tspan>

...但这不起作用(至少在 Chrome 17 和 Firefox 12 中).

..but that doesn't work (in at least Chrome 17 and Firefox 12).

在 <g>(或 <g> 中的文本本身)中用填充"包装 tspan 也不起作用:

Wrapping tspan in <g> (or text itself in <g>) with "fill" doesn't work either:

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

除了创建一个位于同一位置的 元素——这是我想避免的——还有其他方法可以实现吗?

Aside from creating a <rect> element positioned at the same location — something I'd like to avoid — is there another way to achieve this?

推荐答案

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

A rect is probably the best way to do that (assuming you are only dealing with the simplest forms of text).

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

The tspans have no "background" themselves in SVG 1.1, the background is whatever gets painted before the tspan. There are many cases to consider, such as the case where a tspan is inside a textPath that has the shape of a circle. Also note that it's not as simple as a continous rectangle in all cases, a single tspan can be skewed, rotated and partitioned into several intersecting and non-intersecting shapes due to transforms, glyph positioning, etc.

我能想到的另一种方法是无需编写脚本即可完成此操作，但是您需要提前知道字符串的宽度(例如，使用等宽字体).如果你有，那么你可以使用 Ahem 字体添加另一个 tspan 元素，将它放在文档中另一个 tspan 之前，并为其提供与要提供背景"的 tspan 相同的 x,y 位置.

There's another way I can think of that would do this without scripting, but then you'd need to know the width of the string in advance (e.g by using a monospaced font). If you have that then you can add another tspan element using the Ahem font, placing it before the other tspan in the document and giving it the same x,y position as the tspan you want to give a "background".

否则，可以通过编写脚本并添加矩形(或带有类似 Ahem 的字体的 tspans)来实现此目的.

Otherwise the way to do this is through scripting, and adding rectangles (or tspans with an Ahem-like font).

这篇关于tspan 元素的背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！