我想在CSS中给SVG text的背景涂上类似于background-color的 colored颜色

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

有可能吗?

推荐答案

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

要模拟这种效果,可以在文本属性后面画一个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相关问答推荐

如何在没有额外间隔的情况下使用Angular Metal chckbox?

关于React.js的CSS Select 器

当具有外部高度的网格项溢出时,为什么溢出滚动端口填充不应用于网格容器?

CSS Grid我不想要的东西

Astro网站在使用Astro Build构建后无法正常工作

Firefox未正确设置SVG的父div的宽度

Puppeteer - 无法在wine 店网站中拉出正确的 CSS Select 器

使用框架时样式冲突导致的 CSS 网格布局问题

在 SVG 元素上方添加标签而不移动 SVG 元素

子菜单的背景不占用所有空间

我无法在 next.js 应用程序中传播 daisyui 的主题

包含tailwind 中固定纵横比框的内容

在活动状态下更改按钮的外观

Tailwind Box-shadow

全部:初始与使用 CSS 重置

为什么在 CSS3 中启用硬件加速会降低性能?

Select 标签的占位符

当子元素水平溢出时,为什么忽略父元素的右填充?

如何在 Chrome 的判断器中添加/插入之前或之后的伪元素?

使用没有设置宽度或高度的边界半径的胶囊形状?