18

I have an inline SVG image I use as a background, a simlified example is below:

div {
  width: 100%; height: 500px;
  color: green;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><path d='M0 0 H 100 V 100 H 0 Z' fill='currentColor'></path></svg>");
}

https://jsfiddle.net/wjqkL07p/3/

The problem is that the image doesn't inherit the currentColor and is black when I expected it to be green. Any idea?

sdvnksv
  • 8,706
  • 15
  • 46
  • 96
  • 5
    because when using url() you are fetching external ressource even if it's not exactly the case, so there is no way to use current color of CSS within your SVG – Temani Afif Mar 20 '18 at 10:22
  • 8
    You can't easily do this. There's some hacky ways to do it here: https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images – Peter Collingridge Mar 20 '18 at 10:27

0 Answers0