css - SVG中文本的背景颜色

Question

我想为 svg 的背景着色 text类似于 background-color在 CSS 中

我只能在 fill 上找到文档, 为文本本身着色

甚至有可能吗？

Answer 1

不，这是不可能的，SVG 元素没有 background-... presentation attributes .

要模拟这种效果，您可以使用 fill="green" 在 text 属性后面绘制一个矩形。或类似的东西(过滤器)。使用 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);