通过 <img> 在 SVG 中使用 CSS 变量

Question

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

Answer 1

无法将变量从一个文档转移到另一个文档。在单个 HTML 文档中，可以在单个元素的内联 style 属性中声明变量，但这就是您所能做的。

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

Use a CSS-variable in SVG via <img>