我有一个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 才能使用它。