Question

我正在通过背景图片渲染SVG：

.svg_background
{
    color:white;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23"><ellipse fill="none" stroke="currentColor" stroke-width="2" cx="13" cy="8" rx="7" ry="7"/></svg>');
}

这样做的目的是为表单元素提供图像（没有简洁的嵌入AFAIK方式），并使图像的颜色与文本颜色（或由LESS设置的颜色）匹配。

在下面的小提琴中，我看到CSS正确应用于嵌入式SVG示例，但不通过background-image生成的SVG。是否有渲染背景图像的方法导致此方法失败？

https://jsfiddle.net/9o28zee3/

Answer 1

background-image网址中的svg元素需要有颜色，如下所示：

background-image:url('data:image/svg+xml,<svg style="color:white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23"><ellipse fill="none" stroke="currentColor" stroke-width="2" cx="13" cy="8" rx="7" ry="7"/></svg>');

就这种动态而言，这篇文章可能对您有所帮助：Modify SVG fill color when being served as Background-Image

如何动态设置背景图像创建的SVG的颜色？

1 个答案: