通过css更改远程svg的颜色[duplicate]

Question

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;
}

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

Answer 1

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

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

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

Answer 2

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

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

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

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

html prettyprint-override"><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>