img src SVG 使用CSS更改样式

33 浏览
0 Comments

img src SVG 使用CSS更改样式

html

Logo

css

.logo-img path {
  fill: #000;
}

上面的SVG加载并且本地值为 fill：＃fff ，但当我使用上述 css 尝试将其更改为黑色时，它不会更改。这是我第一次尝试使用SVG，我不确定为什么它不起作用。

admin 更改状态以发布 2023年5月24日
0

2 答案

0 Comments

尝试纯CSS：

.logo-img {
  /* to black */
  filter: invert(1);
  /* or to blue */
  filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
}

更多信息请参阅此文章https://blog.union.io/code/2017/08/10/img-svg-fill/

0
0 Comments

您可以将SVG设置为遮罩。这样设置背景颜色会充当填充颜色。

HTML





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

									

				

									

			

			
0