Question

我有一个SVG，当前通过<img src="foobar.svg">显示。父HTML具有一些关联的CSS，这些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，以便它可以使用它。