html
<img src="logo.svg" alt="Logo" class="logo-img">
css
.logo-img path {
fill: #000;
}
上面的svg加载并且是原生的fill: #fff
,但是当我使用上面的css
将它改成黑色时,它没有改变,这是我第一次玩SVG,我不确定为什么它不能工作。
发布于 2017-05-11 21:23:50
您可以将SVG设置为掩码。这样,设置一个背景颜色就可以作为你的填充颜色。
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
发布于 2016-01-16 22:34:25
如果您的目标只是更改徽标的颜色,并且不一定需要使用CSS,那么就不要使用javascript或jquery,正如前面的一些答案所建议的那样。
为了准确地回答最初的问题,只需:
logo.svg
。fill: #fff
并将其替换为fill: #000
例如,在文本编辑器中打开logo.svg
时,可能如下所示:
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#fff"/>
</svg>
..。只需更改填充并保存即可。
发布于 2018-08-27 22:43:48
尝试纯CSS:
.logo-img {
// to black
filter: invert(1);
// or to blue
// filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg);
}
有关更多信息,请参阅本文https://blog.union.io/code/2017/08/10/img-svg-fill/
https://stackoverflow.com/questions/24933430
复制相似问题