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

I have this pen where I have made an example of the SVG Sprites Technique:

And I want to apply this with CSS:

.circle {
    fill: #f00;
}
.polyline {
    fill: #00f;
}
<svg xmlns="http://www.w3.org/2000/svg"style="position:absolute;top:-9999px;opacity:0;">    
        <symbol viewBox="0 0 64 64" id="circle">
            <title>circle</title>
                <path fill="#1D1D1B" d="M32,0C14.327,0,0,14.327,0,32c0,17.673,14.327,32,32,32s32-14.327,32-32C64,14.327,49.673,0,32,0z M32,52.5c-11.322,0-20.5-9.178-20.5-20.5S20.678,11.5,32,11.5S52.5,20.678,52.5,32S43.322,52.5,32,52.5z"/>
        </symbol>
        <symbol viewBox="0 0 56.983 64.804" id="polyline">
            <title>polyline</title>
                <polyline fill="#1D1D1B" points="0,64.804 30.726,0 56.983,0 56.983,54.749 29.33,27.095 "/>
        </symbol>
    </svg>

    <svg class="circle">
        <use xlink:href="#circle"></use>
    </svg>

    <svg class="polyline">
        <use xlink:href="#polyline"></use>
    </svg>

My problem is that I'm not able to change the fill color of the elements added to the spritesheet. I have looked for information about how to do this correctly and I think my approach it's correct but it seems that it's not like that.

In this other pen, wrote in the same way I think, is working fine. What am I doing wrong?

Sorry for my english if I have made any mistake, it's not my native language.

htmlcsssvg


Solution 1:[1]

Here is a working example: http://codepen.io/anon/pen/NqmrOR

The problem was the fill="#1D1D1B" attributes placed directly on the SVG elements.

NOTE: Using CSS class selectors on SVG elements, while supported in most up-to-date browsers, is not universally supported. Programmatically applying styles to SVG elements in JS themselves is actually better supported.

Solution 2:[2]

When using the command <use xlink: href =" # circle "> </use> the content of the SVG element goes to the Shadow DOM
Therefore, it becomes impossible to change styles with external CSS
The solution to this problem is to use forced ?inherit` inheritance

 polyline, path {
fill:inherit;
stroke:inherit;
}

You can read more in this article: Styling SVG Content with CSS

polyline, path {
fill:inherit;
stroke:inherit;
}
 .circle {
fill:yellowgreen;
} 
 .circle:hover {
fill:red;
} 

.polyline {
fill:gold;
}

.polyline:hover {
fill:red;
}
<svg  xmlns="http://www.w3.org/2000/svg"style="position:absolute;top:-9999px;opacity:0;">    
    <symbol viewBox="0 0 64 64" id="circle">
        <title>circle</title>
            <path fill="#1D1D1B" d="M32,0C14.327,0,0,14.327,0,32c0,17.673,14.327,32,32,32s32-14.327,32-32C64,14.327,49.673,0,32,0z M32,52.5c-11.322,0-20.5-9.178-20.5-20.5S20.678,11.5,32,11.5S52.5,20.678,52.5,32S43.322,52.5,32,52.5z"/>
    </symbol>
    <symbol viewBox="0 0 56.983 64.804" id="polyline">
        <title>polyline</title>
            <polyline fill="#1D1D1B" points="0,64.804 30.726,0 56.983,0 56.983,54.749 29.33,27.095 "/>
    </symbol>
</svg>

<svg class="circle">
    <use  xlink:href="#circle"></use>
</svg>

<svg class="polyline">
    <use  xlink:href="#polyline" ></use>
</svg>

Solution 3:[3]

Another option that I like is the css filter property.

Based on How to transform black into any given color using only CSS filters you can adjust the filter to change the svg's color to whatever you want. More info: https://medium.com/@union_io/swapping-fill-color-on-image-tag-svgs-using-css-filters-fa4818bf7ec6

Solution 4:[4]

Just in case someone has CSS styling problems with SVG icons. Here how it goes:

<svg width="28" height="26" viewBox="0 0 28 26" xmlns="http://www.w3.org/2000/svg">
   <path d="M27.333..../>
</svg>

Styling is applied on inner path element and not to the svg directly. The correct styling:

svg path {
   fill: #FFFFFF;
}

Solution 5:[5]

In my case I need to remove internal styling inside svg file (as sprite.svg) like thisnthen add styles inside normal CSS file

<g fill="rgb(0,0,0)">

//delete fill = "rgb(0,0,0)" , then add your style in css file

</g>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ben Cook
Solution 2 Alexandr_TT
Solution 3 Bogdan M.
Solution 4 Alexander Golovinov
Solution 5 Abdullah Habashy

Related Questions