如何动态设置background-image创建的SVG的颜色？

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

背景图片网址中的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>');

至于使它动态化，这篇文章可能对您有帮助： 在用作Background-Image时修改SVG填充颜色