css – SVG中文本的背景颜色

前端之家收集整理的这篇文章主要介绍了css – SVG中文本的背景颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想要的颜色的svg文本的背景类似于css中的背景颜色

我只能找到有关填充的文档,其中的文本本身的颜色

是甚么可能?

解决方法

没有这是不可能的,SVG元素没有background -… presentation attributes

要模拟此效果,您可以在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);

猜你在找的CSS相关文章