CODEWITHSUNDEEP
htmlcsssvg
Miguel Morera
Miguel Morera

Reputation: 469

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.

Upvotes: 16

Views: 33016

Answers (7)

Armstrong Aisosa
Armstrong Aisosa

Reputation: 1

Reference a class add onto the svg tag and target the path and change the colour in the css file.

example

    .logoSvg path {
  fill: var(--green-text-colour);
}

to reach all svgs at once

    svg path {
  fill: var(--green-text-colour);
}

Upvotes: 0

Abdullah Habashy
Abdullah Habashy

Reputation: 1

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>

Upvotes: 0

Alexandr_TT
Alexandr_TT

Reputation: 14585

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>

Upvotes: 6

Alexander Golovinov
Alexander Golovinov

Reputation: 533

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

Upvotes: 2

Bogdan M.
Bogdan M.

Reputation: 2191

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

Upvotes: 1

Ben Cook
Ben Cook

Reputation: 1684

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.

Upvotes: 5

Sachin Kanungo
Sachin Kanungo

Reputation: 1064

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

Upvotes: 22

Related Questions