如何更改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>

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中，使用no-svgModernizr中的类CDN：来检查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;
}