html
<img src="logo.svg" alt="Logo" class="logo-img">
CSS
.logo-img path {
fill: #000;
}
上面的 svg 加载并且是原生的 fill: #fff
但是当我使用上面的 css
尝试将它更改为黑色时它没有改变,这是我的第一次玩 SVG,我不确定为什么它不起作用。
最佳答案
您可以将 SVG 设置为 mask 。这样设置背景颜色将充当您的填充颜色。
HTML
<div class="logo"></div>
CSS
.logo {
background-color: red;
-webkit-mask: url(logo.svg) no-repeat center;
mask: url(logo.svg) no-repeat center;
}
JSFiddle: https://jsfiddle.net/KuhlTime/2j8exgcb/
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/mask
请检查您的浏览器是否支持此功能: https://caniuse.com/#search=mask
关于css - img src SVG 使用 CSS 改变样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57603056/