currentColor in background image svg

Question

This doesn’t work as you expect it to because using url() makes the SVG be treated as if it were an external resource, even if it’s not exactly the case. So there is no way to use CSS’ currentColor within your SVG when it’s a background image.

For this specific case, you could instead use a mask and use the background-color to update the color. Make sure you fill your SVG with a non-transparent color.

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

<div></div>

Leave a Comment Cancel reply