在 SVG <img>中使用 CSS 变量



我有一个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>

变量不能从一个文档传输到另一个文档。在单个 HTML 文档中,可以在单个元素的内联style属性中声明变量,但这大约是您可以做到的。

如果变量必须是 CSS 变量,则需要内联该 SVG 才能使用它。

最新更新