img src SVG 用 CSS 改变样式

Question

html

 <img src="logo.svg" alt="Logo" class="logo-img">

css

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

上面的svg加载并且本机是 fill: #fff 但是当我使用上面的 css 尝试将其更改为黑色时它不会改变，这是我第一次玩SVG，我是不知道为什么它不工作。

原文由 ngplayground 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以将 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

原文由 André Kuhlmann 发布，翻译遵循 CC BY-SA 4.0 许可协议