通过css更改远程svg的颜色[重复]答案

【问题标题】：Changing the color of a distant svg via css [duplicate]通过css更改远程svg的颜色[重复]
【发布时间】：2022-01-23 00:53:02
【问题描述】：

https://jsfiddle.net/zfcy13kg/6/

我将我的 svg 称为如下：

<img width="60px" src="https://www.svgrepo.com/show/80156/down-arrow.svg" />

css:

img{
   color: red;
   fill: red;
   stroke: red;
}

我想把颜色改成红色。
可能吗？
谢谢

【问题讨论】：

请阅读这篇文章Change Color of SVG on Hover

标签： svg

【解决方案1】：

一种方法是在 css 中使用“过滤器”属性，您需要从过滤器中更改色调、饱和度、亮度等的值。

img{
   filter: invert(24%) sepia(98%) saturate(7480%) hue-rotate(10deg) brightness(101%) contrast(112%);
}

&lt;img width="60px" src="https://www.svgrepo.com/show/80156/down-arrow.svg" /&gt;

【讨论】：

谢谢，我不能直接把颜色改成红色吗？
滤镜：反转（24%）棕褐色（98%）饱和（7480%）色调旋转（10度）亮度（101%）对比度（112%）；
我也更新了 sn-p。
codepen.io/sosuke/pen/Pjoqqp

【解决方案2】：

修改 SVG 属性要求 SVG 位于 DOM 中。

您可以从 URL 中提取 SVG 代码并将其插入 DOM：

svg {
  width: 50px;
  height: 50px;
  overflow: visible;
}

path {
  fill: red;
  stroke: black;
  stroke-width: 10;
}

<svg viewBox="0 0 330 330">
  <path d="M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393  c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393  s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z"/>
</svg>

【讨论】：