0

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

Im calling my svg as the following:

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

css:

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

I want to change the color to red.
Possible?
Thanks

SexyMF
  • 10,657
  • 33
  • 102
  • 206
  • Please read this article [Change Color of SVG on Hover](https://css-tricks.com/change-color-of-svg-on-hover/) – enxaneta Dec 21 '21 at 16:18

2 Answers2

3

Modifying SVG properties require the SVG to be inside the DOM.

You can extract the SVG code from your URL and insert it into 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>
Jean Will
  • 543
  • 3
  • 11
2

One way to do it would be using 'filter' property in css, where you need to change the value of hue, saturation, brightness, etc from the 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" />
Vicky Maharjan
  • 318
  • 1
  • 7