tspan元素的背景色

Posted 2023-02-21

【中文标题】tspan元素的背景色

【英文标题】：Background color of tspan element

【发布时间】：2012-01-30 07:20:45

【问题描述】：

是否可以给 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 包装在 <g>（或 <g> 中的文本本身）也不起作用：

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

除了创建一个位于同一位置的 <rect> 元素（我想避免这种情况）之外，还有其他方法可以实现这一点吗？

【参考方案1】：

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

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

我能想到的另一种方法可以在不编写脚本的情况下执行此操作，但是您需要提前知道字符串的宽度（例如，使用等宽字体）。如果你有，那么你可以使用 Ahem 字体添加另一个 tspan 元素，将它放在文档中的另一个 tspan 之前，并给它与你想要提供“背景”的 tspan 相同的 x,y 位置。

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

【讨论】：

谢谢，那我就去 rect's。我现在明白为什么指定文本背景可能会出现问题。

【参考方案2】：

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

...或者您可以使用 getBBox 和 getCTM...它将为您提供旋转文本的优势。 例子： http://srufaculty.sru.edu/david.dailey/svg/getCTM.svg

【讨论】：

SVG 确实允许在根 svg 元素上使用“背景”，在 SVG Tiny 1.2 中也有“viewport-fill”和“viewport-opacity”。但是确实没有什么可以自动填充 tspan，您目前必须使用脚本来完成。我不明白为什么“viewBox”会在这里适用。

@Erik，总的来说，浏览器对 Tiny 的支持有多强？

一般？有些部分受支持，有些则不支持:) 目前还没有广泛支持“viewport-fill”（Opera 支持它），但还有其他一些东西正在受到关注，例如“vector-effect”和“多个浏览器引擎支持的可聚焦的。

非常感谢，我浏览了规格......但遗憾的是，有很多漂亮的不受支持的东西。