我如何改变一个'svg'元素的颜色?

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

我的代码:

.change-my-color { 填充:绿色; ｝ svg < > <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src=" ppngback .png" /> < / svg >

当前回答

最简单的技巧是在页面加载时使用jQuery改变颜色。

      $(document).ready(function () { 
              $('svg').find('path').attr('fill', '#FFF');
      });

#FFF是你想要设置的颜色代码。

2022-02-26 06:29:11

其他回答

如果您有一个具有不同不透明度的单色SVG，您只是想将其着色为不同的颜色，那么可以使用另一种方法:feFlood SVG过滤器。

然而，这个解决方案不像单行CSS那样简单:

它适用于img元素中的svg。这根本不需要编辑源SVG。它允许您简单地为SVG选择目标颜色，而不用担心复杂的颜色转换，如色调旋转。

这里有一个例子:

在上面的示例中，我们创建了一个内联SVG来定义过滤器，然后将其应用于图像。在<filter>块中，我们首先通过<feFlood>定义我们想要的填充颜色，然后我们使用源的alpha通道和泛洪颜色创建一个合成图像。最后，通过img元素上的filter CSS属性对整个图像应用过滤器。

我是从Smashing杂志的一篇文章中学到这个技巧的。如果您想了解更多关于SVG筛选器的知识，强烈推荐阅读这本书。

还有一些需要注意的事情:

这个过滤器可以通过CSS filter属性应用于任何HTML元素。同一过滤器可以在同一页面上重复使用多次。如果您使用的是内联SVG，则<defs>块可以构成SVG元素的一部分，而过滤器仍然可以应用于整个SVG或选择性元素。这避免了过滤器需要单独的SVG元素。

2022-09-21 10:48:47

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

如果你想改变你的SVG图像，你必须使用<object>， <iframe>或使用< SVG > inline加载它。

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

See:

#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 (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js)的no-svg类来检查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);
}

然后你可以改变你的内联元素的颜色: