SVG中文本的背景颜色 [英] Background color of text in SVG

问题描述

我想在css中 $ 类似 c-> $ b
$ b

我只能找到 fill 上的文档，它会为文本本身着色

是否可能？

解决方案

没有这是不可能的，SVG元素没有 background -... 演示文稿属性。

要模拟此效果，您可以在text属性后面绘制 fill =green （过滤器）。使用JavaScript，您可以执行以下操作：

  var ctx = document.getElementById（the-svg），
 textElm = ctx.getElementById（the-text），
 SVGRect = textElm.getBBox（）; 
 
 var rect = document.createElementNS（http://www.w3.org/2000/svg，rect）; 
 rect.setAttribute（x，SVGRect.x）; 
 rect.setAttribute（y，SVGRect.y）; 
 rect.setAttribute（width，SVGRect.width）; 
 rect.setAttribute（height，SVGRect.height）; 
 rect.setAttribute（fill，yellow）; 
 ctx.insertBefore（rect，textElm）; 
  

I want to color the background of svg text similar to background-color in css

I was only able to find documentation on fill, which colors the text itself

Is it even possible?

解决方案

No this is not possible, SVG elements do not have background-... presentation attributes.

To simulate this effect you could draw a rectangle behind the text attribute with fill="green" or something similar (filters). Using JavaScript you could do the following:

var ctx = document.getElementById("the-svg"),
textElm = ctx.getElementById("the-text"),
SVGRect = textElm.getBBox();

var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    rect.setAttribute("x", SVGRect.x);
    rect.setAttribute("y", SVGRect.y);
    rect.setAttribute("width", SVGRect.width);
    rect.setAttribute("height", SVGRect.height);
    rect.setAttribute("fill", "yellow");
    ctx.insertBefore(rect, textElm);

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