通过 css 更改远处 svg 的颜色

Question

我调用我的 svg 如下：

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

css:

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

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

Answer 1

修改 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>

Answer 2

一种方法是在 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" />

通过 css 更改远处 svg 的颜色

Changing the color of a distant svg via css

svg