如何动态设置背景图片创建的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示例，但是而不是通过背景图像生成的SVG。有没有办法背景图像呈现，导致此方法失败？

https://jsfiddle.net/9o28zee3/

Answer 1

中的背景图像的URL中的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