如何動態設置背景圖片創建的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