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.

score 21 · Accepted Answer · answered Aug 12 '15 at 17:22

21

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

answered Aug 12 '15 at 17:22

Sachin Kanungo

1,054
9
17

score 5 · Answer 2 · answered Aug 12 '15 at 17:24

5

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.

answered Aug 12 '15 at 17:24

Ben Cook

1,654
2
18
32

Thank you! I will consider to add a fallback with JS. – Miguel Morera Aug 12 '15 at 17:43

score 5 · Answer 3 · answered Oct 06 '20 at 13:18

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>

Ok, how to set 3 difference colors for svg with 3 paths inside? — Andriy Yushko, Mar 23 '21 at 11:08
Ok! It works nicely in Firefox, but doesn't work in webkit based browsers. Chrome, Opera, Edge can't override shadow-root properties of SVG's in sprite. — filburt, Apr 28 '21 at 10:09

score 1 · Answer 4 · answered Oct 04 '18 at 07:43

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

score 1 · Answer 5 · answered Oct 06 '20 at 07:25

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

score 0 · Answer 6 · answered Feb 26 '22 at 06:54

0

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>

answered Feb 26 '22 at 06:54

Abdullah Habashy

1

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

6 Answers6

Linked