我有一个 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 才能使用它。
关于html - 通过 <img> 在 SVG 中使用 CSS 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52009759/