Как изменить цвет изображения SVG в свойстве содержимого CSS?
Я хотел бы использовать изображение SVG в качестве спрайта CSS через свойство содержимого,самозагрузки стиль, вот так:
i.rectangle-image {
content: url(rectangle.svg);
}
и вот мой SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect x="10" y="10" width="80" height="80"/>
</svg>
и предложенный HTML:
<div><i class="rectangle-image"></i> Hello, world!</div>
Я хотел бы иметь возможность перекрасить SVG в моем приложении, например, чтобы значок в некоторых местах казался фиолетовым, а в других - белым. Я знаю, что могу добиться этого, имея три разных файла SVG (или URI данных) сfill атрибут установлен по-разному на<rect> тег, но мне интересно, есть ли способ сделать это с помощью CSS в моем HTML?
Я пытался добавитьfill приписатьi.rectangle-image селектор, но это не работает.
Я смотрел наэтот ответ и это не совсем то, что я хочу. Они предлагают встраивать SVG по всей странице, и я бы предпочел сделать это через CSScontent если возможно. есть идеи? Мне не повезло?