css – tspan元素的背景颜色

前端之家收集整理的这篇文章主要介绍了css – tspan元素的背景颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否有可能给出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中).

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

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

除了创建一个< rect>位于同一位置的元素 – 我想避免的东西 – 还有另一种方法可以达到这个目的吗?

解决方法

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

tspans在SVG 1.1中没有“背景”,背景是在tspan之前绘制的任何东西.有许多情况需要考虑,例如tspan位于具有圆形形状的textPath内.另请注意,在所有情况下,它并不像连续矩形那么简单,由于变换,字形定位等原因,单个tspan可以倾斜,旋转并分割成若干交叉和非交叉形状.

我可以想到的另一种方法是在没有脚本的情况下做到这一点,但是你需要事先知道字符串的宽度(例如使用等宽字体).如果你有,那么你可以使用Ahem字体添加另一个tspan元素,将它放在文档中的另一个tspan之前,并给它与你想要给出“背景”的tspan相同的x,y位置.

否则,执行此操作的方法是通过脚本编写,并添加矩形(或具有类似Ahem字体的tspans).

原文链接:https://www.f2er.com/css/242305.html

猜你在找的CSS相关文章