Можете ли вы использовать :host() или аналогичный в для стилизации SVG? [дубликат] ⇐ CSS

[Anonymous]

Я пытаюсь стилизовать SVG внутри тега img. Я не использую шаблон svg в HTML, чтобы можно было повторно использовать кэшированное изображение между страницами и избежать отправки ненужных байтов.
При шаблонировании svg в HTML следующий код работает и позволяет условное оформление на основе селектора класса:

Код: Выделить всё

html.dark path { fill: white }
html.light path { fill: black }

...

Однако это не работает, если svg находится в теге img.

Код: Выделить всё

[img]logo.svg[/img]

Я надеюсь, что существует неизвестный мне селектор CSS, который я могу использовать для проникновения в контекст тега img.
возможно, что-то вроде :

Код: Выделить всё

[img]logo.svg[/img]

Код: Выделить всё

:host(.dark) path { fill: white }
:host(.light) path { fill: black }

...

Однако :host не работает с



const tag = document.querySelector('img')
const url = tag.attributes.getNamedItem('src').value
const text = await fetch(url).then(r => r.text())
tag.outerHTML = text



Будет ли повторно использоваться кэшированный ответ из первоначального HTTP-запроса? Я обнаружил, что fetch не всегда повторно использует кэшированный ответ.


Подробнее здесь: https://stackoverflow.com/questions/787 ... ing-an-svg