1

Hi to the random people who stumble across this question!

Here's a simple codepen demo to illustrate my problem.

.svg::before {
  content: url(/* SVG url */);

  /* Fill don't work */
  fill: #FFF;
}

As you can see above ( as if the comment and the title isn't obvious enough ), fill doesn't seem to work pseudo SVG element.

Is there any workaround or solutions to this problem or do I have to hard-code the fill on the SVG element?

Lukas Chen
  • 373
  • 7
  • 15
  • 2
    You can't style an SVG loaded this way. It is treated like an image meaning that you can't access it's internals. – Turnip Oct 13 '16 at 11:19
  • 1
    Depending on the browsers you support, you can try using background-image and css masks or css filters instead. See [example here](https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images) – Dogoku Oct 13 '16 at 11:23
  • You could try setting the SVG as an object on the page to control it. I think you also then need to put the CSS inside the SVG. – R Reveley Oct 13 '16 at 11:51

0 Answers0