JQuery - 在标记中更改svg颜色

30 浏览
0 Comments

JQuery - 在标记中更改svg颜色

html

Logo

css

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

上面的SVG本地加载，填充颜色为fill: #fff，但是当我使用上面的css将其改为黑色时，它没有改变，这是我第一次尝试使用SVG，我不确定为什么不起作用。

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

2 答案

0 Comments

尝试纯CSS：\n

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

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

0
0 Comments

您可以将SVG设置为蒙版。这样，设置背景颜色将作为填充颜色。

\nHTML
\n




\nCSS
\n


.logo {
  background-color: red;
  -webkit-mask: url(logo.svg) no-repeat center;
  mask: url(logo.svg) no-repeat center;
}




\nJSFiddle: https://jsfiddle.net/KuhlTime/2j8exgcb/
\nMDN: https://developer.mozilla.org/en-US/docs/Web/CSS/mask


\n请检查您的浏览器是否支持此功能：https://caniuse.com/#search=mask。

									

				

									

			

			
0