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

标签 html css svg css-variables

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

相关文章:

html - 为什么当通过链接加载页面时我的字体呈现不同?

html - 通过 CSS 设置 <table> 中第一列和第二列的对齐方式和填充

svg - 使用 d3.js 在 svg 上渲染 MathML

c# - 将多路径 SVG 转换为几何图形再转换为 WPF

css - 无法从 SVG def 更改 SVG 中对象的颜色

php - 在 Wordpress 中运行 MySQL 查询会导致 HTML 标记消失?

html - CSS a block 在被 ul、li、/li 标签包围时向右移动

html - 2 列容器 100% 主体高度

html - 设置浏览器调整大小的比例图像宽度

html - 许多 CSS 选择器在 IE 6 中不受支持。如何解决这个问题?