Using the content
property generates (non-exposed) markup functionally equvialent to an svg in an <img> element.
You cannot apply style to elements inside the svg document because:
- styles are not allowed to cascade across documents
- when using <img> (or
content
, or any css image property that references svg) the svg document is not exposed by the browsers due to security concerns
Similar questions, but for background-image
here and here.
So, to do what you want you must get around the two points above somehow. There are various options for doing that, e.g using inline svg, using filters (applied to the <img>) or generating different svg files (or data URIs), as in your question.