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

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

0 голосов
/ 24 августа 2018

У меня есть 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>

1 Ответ

0 голосов
/ 24 августа 2018

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

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

...