如何更改 svg 元素的颜色？

Question

我想 使用这种技术 并更改 SVG 颜色，但到目前为止我还不能这样做。我把它放在 CSS 中，但无论如何我的图像总是黑色的。

我的代码：

 .change-my-color {
  fill: green;
}

 <svg>
    <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>

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

Answer 1

您不能以这种方式更改图像的颜色。如果将 SVG 作为图像加载，则无法在浏览器中使用 CSS 或 Javascript 更改其显示方式。

如果要更改 SVG 图像，必须使用 <object> 、 <iframe> 或使用 <svg> 内联加载它。

如果您想使用页面中的技术，您需要 Modernizr 库，您可以在其中检查 SVG 支持并有条件地显示或不显示后备图像。然后，您可以内联您的 SVG 并应用您需要的样式。

看 ：

 #time-3-icon {
   fill: green;
}

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}

 <svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206
	C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161
	C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505
	c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081
	c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

您可以内联您的 SVG，用类名（ my-svg-alternate ）标记您的后备图像：

 <svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

在 CSS 中，使用 Modernizr 中的 no-svg 类（CDN： http ://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js）来检查 SVG 支持。如果没有 SVG 支持，SVG 块将被忽略并显示图像，否则图像将从 DOM 树中删除（ display: none ）：

 .my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}

然后您可以更改内联元素的颜色：

 #time-3-icon {
   fill: green;
}

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

Answer 2

2020答案

CSS Filter 适用于所有当前浏览器

更改任何 SVG 颜色

1. 使用 <img> 标签添加 SVG 图像。

    <img src="dotted-arrow.svg" class="filter-green"/>

1. 要过滤到特定颜色，请使用以下 代码笔（单击此处打开代码笔） 将十六进制颜色代码转换为 CSS 过滤器：

例如， #00EE00 的输出是

   filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);

1. 将 CSS filter 添加到此类中。

    .filter-green{
       filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
   }

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