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

Question

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.

Answer 1

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>

Answer 2

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;
}

Answer 3

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