Change Color of Svg Spritesheet Sprite with CSS

Change color of SVG sprite

You cannot change the color with an external css. You need to inline the SVG in order to to that. Please read Using SVG for details.

I can't change the fill color of a SVG Sprite

You have to remove internal styling of fill property and only apply css property. Either way change fill property of svg using javascript DOM.

How do I change the colour of an SVG image in a CSS content property?

If you use the CSS content facility you're loading the SVG data basically as an image. For privacy reasons you can't affect how the image is displayed using external CSS or javascript.

If you want to change the contents of SVG data you'd either have to load it via an <object> or <iframe> tag or put it inline in the HTML file.

SVG: How to change fill color of a symbol in an external svg sprite

<svg class="svg_hover">
    <use xlink:href="symbols.svg#icon-twitter" />
</svg>

css:

.svg_hover:hover{ fill: #f00; }

---

Related Topics