How to change the color of an svg when it is used inside a content url?

Question

I have a svg created in a div thanks to ::after{content: url(mysvg)}. The svg is black by default. I want to make it green. I have tried to add fill="currentColor" to its inline code, to add color: green, fill: green, etc. Nothing works. How to change its color?

Here is my code:

.mydiv{
  color: green;
}

.mydiv::after {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><polygon points='16 1.73 20.64 11.13 31 12.63 23.5 19.94 25.27 30.27 16 25.39 6.73 30.27 8.5 19.94 1 12.63 11.37 11.13 16 1.73' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/></svg>");
  background-size: contain; 
  display: inline-block;
  width: 32px;
  height: 32px;
}

Please find this codepen in case it might be helpful: https://codepen.io/MonsieurLeland/pen/PoZyVdN

https://stackoverflow.com/questions/20509525/currentcolor-inheritance-for-svg-url — Nikita Madeev, Jul 17 '20 at 08:32
This question does not answer to mine. Locking this thread is not relevant. Also I have found the solution: you need to escape the #eee hexcode by writing %23eee. — DoneDeal0, Jul 17 '20 at 09:14
You need to make it clear what you're asking. I've added another link that covers your issue. — Robert Longson, Jul 17 '20 at 11:26

How to change the color of an svg when it is used inside a content url?

0 Answers0