Используйте CSS-переменную в SVG через <img>

Question

Используйте CSS-переменную в SVG через <img>

У меня есть SVG, который я сейчас отображаю через <img src="foobar.svg">, Родительский HTML имеет некоторый CSS-код, который определяет переменные, которые мне нужны в SVG. SVG имеет <style> чтобы хотлинк это.

CSS-переменные, определенные в родительском элементе, кажутся недоступными для SVG. Есть ли способ заставить это работать? Я не могу просто скопировать CSS; Я мог бы, в крайнем случае, вставить SVG в HTML.

Текущие настройки что-то под мелодию

<html>
<head>
<link rel="stylesheet" href="the_css_that_defines_the_variables.css">
</head>
<body>
<img src="foobar.svg">
...

<svg>
<style type="text/css">svg { fill: var(--myvariable) }</style>
...
</svg>

2

html css svg css-variables

Источник

user2722968 24 авг '18 в 18:10

1 ответ

Решение

Другие вопросы по тегам html css svg css-variables

user106224 24 авг '18 в 18:16 2018-08-24 18:16 · Accepted Answer · 2018-08-24 18:16

Переменные не могут быть перенесены из одного документа в другой. В пределах одного HTML-документа переменные могут быть объявлены в строке style атрибут отдельных элементов, но это примерно, насколько вы можете пойти.

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