Как динамически установить цвет 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), и иметь цвет текста соответствия изображения цвет (или цвет, установленный МЕНЬШЕ).

В следующей скрипте я вижу, что CSS правильно применяется к встроенному примеру SVG, но не SVG, сгенерированный с помощью фонового изображения. Есть ли способ создания фоновых изображений, вызывающих сбой этого метода?

https://jsfiddle.net/9o28zee3/

Answer 1

SVG элемент в URL фонового образа должен иметь цвет, как это:

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