我想在外部文件中更改 svg 的颜色并使用 img 标签导入

Posted 2023-03-06

【中文标题】我想在外部文件中更改 svg 的颜色并使用 img 标签导入

【英文标题】：I want to change the color of svg while it is in outer file and imported with img tag

【发布时间】：2021-11-09 06:02:02

【问题描述】：

我使用谷歌字体和图标，并将它们保存到主题文件夹中，我知道可以使用 img 标签导入 SVG 文件，但是在我的网站上，我有一个用户可以更改主题的设置，例如，明暗，我的问题是所有颜色的变化，但不是使用<img> 导入的 SVG，如果使用<img> 导入 SVG 文件有没有办法更改它的颜色？如果没有，有没有办法在导入时从 SVG 文件中更改 fill 属性？？

【问题讨论】：

“导入时”是什么意思？

我的意思是当我将 svg 文件转换为 html 文件时，我想编辑填充属性

iconmeister.github.io <svg-icon> 让您可以完全控制带有属性、属性和 CSS 变量的 SVG 图标

【参考方案1】：

如果您在img 标签的src 中使用它，您不能通过CSS 更改SVG 的fill 属性是正确的——您需要在文档中包含SVG 的内容。

您可以尝试使用 CSS filter 来更改图像的外观，尤其是 brightness 或 invert 选项：

<img src="myimage.svg" class="invert">

<style>
.grayscale  filter: grayscale(100%); 
.contrast  filter: contrast(160%); 
.brightness  filter: brightness(0.25); 
.invert  filter: invert(100%); 
</style>

【讨论】：

感谢invent 课程真的有效，它在白色和黑色之间切换，我想要的是至少切换颜色，这个解决方案真的有效