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

问题描述

是否可以给出SVG < tspan> 元素背景颜色？如果没有，最好的模拟方法是什么？

我的目标是给文本背景颜色，我想填充 tspan> 元素将是完美的 - 他们已经概述表示多行文本中的行的文本块（< tspan> p>

我使用的示例：

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

我尝试了fill属性，但它似乎影响文本的填充后面：

 < tspan fill =yellow> hello< / tspan> 
  

我也尝试通过CSS设置background-color：

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

..但不起作用（至少在Chrome 17和Firefox 12中） p>



在< g> 中包含tspan（或文本本身在< g& code>）withfill不起作用：

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

除了创建< rect>

解决方案

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

在SVG 1.1中tspans本身没有背景背景是什么在tspan之前被绘。有很多情况需要考虑，例如tspan在具有圆形形状的textPath内部的情况。还要注意，在所有情况下它不像连续矩形那样简单，由于变换，字形定位等，单个tspan可以被偏斜，旋转和分割成几个相交和不相交的形状。

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

否则，方法是通过脚本，添加矩形（或者用类似Ahem的字体的tspans）。

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

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.

The example I'm working with:

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

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

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

I also tried setting background-color via CSS:

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

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

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).

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.

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".

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

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