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并且我不确定它为什么不工作。

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://jsfidle.net/kuhltime/2j8exgcb/
mdn:https://developer.mozilla.org/en-us/docs/web/css/mask

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

Answer 2

如果您的目标只是改变徽标的颜色，而不一定需要使用CSS，那么就不要像前面一些答案所建议的那样使用javascript或jquery。

要准确地回答原来的问题，只需：

>

在文本编辑器中打开logo.svg。

查找填充:#fff并将其替换为填充:#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>

…只需更改填充并保存即可。