CODEWITHSUNDEEP
htmlcsssvg
Tamjid
Tamjid

Reputation: 5576

Svg color not changing from css color?

typically i change a svgs color by targetting the svg in my css and setting the color property but that's having no effect on the bellow svg element. Any idea why? I have read that the svg must have a fill="currentColor" property which I added but the color is still not changing. Is there a way I can dynamically set the svg color from css ?

<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="ionicon" viewBox="0 0 512 512"><title>Logo Instagram</title><path d="M349.33 69.33a93.62 93.62 0 0193.34 93.34v186.66a93.62 93.62 0 01-93.34 93.34H162.67a93.62 93.62 0 01-93.34-93.34V162.67a93.62 93.62 0 0193.34-93.34h186.66m0-37.33H162.67C90.8 32 32 90.8 32 162.67v186.66C32 421.2 90.8 480 162.67 480h186.66C421.2 480 480 421.2 480 349.33V162.67C480 90.8 421.2 32 349.33 32z"/><path d="M377.33 162.67a28 28 0 1128-28 27.94 27.94 0 01-28 28zM256 181.33A74.67 74.67 0 11181.33 256 74.75 74.75 0 01256 181.33m0-37.33a112 112 0 10112 112 112 112 0 00-112-112z"/></svg>

Upvotes: 0

Views: 7231

Answers (3)

herrstrietzel
herrstrietzel

Reputation: 17334

Most likely there is something wrong in your css.
Maybe a specificty issue (e.g previously declared svg color styles).

It should work like this:

body{
font-size: 3vw;
}

.green{
color: green
}

.red{
color: red
}

.fill-gray svg{
fill: #ccc;
}

.svg-inline{
display:inline-block;
font-size:1em;
height:1em;
width:1em;
}
<p class="green">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="ionicon svg-inline" viewBox="0 0 512 512">
<title>Logo Instagram</title>
<g id="icon-instagram">
<path id="path1" d="M349.33 69.33a93.62 93.62 0 0193.34 93.34v186.66a93.62 93.62 0 01-93.34 93.34H162.67a93.62 93.62 0 01-93.34-93.34V162.67a93.62 93.62 0 0193.34-93.34h186.66m0-37.33H162.67C90.8 32 32 90.8 32 162.67v186.66C32 421.2 90.8 480 162.67 480h186.66C421.2 480 480 421.2 480 349.33V162.67C480 90.8 421.2 32 349.33 32z"/>
<path id="path2" d="M377.33 162.67a28 28 0 1128-28 27.94 27.94 0 01-28 28zM256 181.33A74.67 74.67 0 11181.33 256 74.75 74.75 0 01256 181.33m0-37.33a112 112 0 10112 112 112 112 0 00-112-112z"/>
</g>
</svg>
 green icon
</p>

<p class="red">
<svg class="svg-inline" fill="currentColor" viewBox="0 0 512 512">
<use href="#icon-instagram" />
</svg> Inline Icon (fill inherited by parent's color)
</p>

<p class="red fill-gray">
<svg class="svg-inline" fill="currentColor" viewBox="0 0 512 512">
<use href="#icon-instagram" />
</svg> Inline Icon (fill color overridden by fill property)
</p>

<p class="red">
<svg class="svg-inline" viewBox="0 0 512 512">
<use href="#icon-instagram" />
</svg> Inline Icon (fill color can't be inherited, since fill="currentColor" is missing )
</p>

Upvotes: 3

Major_Flux-
Major_Flux-

Reputation: 148

You could try:

<style>
    #svg{
        --currentColor: #00ff00;
    }
</style>
<svg id="svg" width="100" height="100" viewbox="0 0 100 100" xlmns="http://www.w3.org/2000/svg">
    <style>
        rect{
            fill: var(--currentColor);
        }
    </style>
</svg>

This method will work.

Upvotes: 0

Ihor
Ihor

Reputation: 1244

Use this code.
I set fill to path.

<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Logo Instagram</title><path d="M349.33 69.33a93.62 93.62 0 0193.34 93.34v186.66a93.62 93.62 0 01-93.34 93.34H162.67a93.62 93.62 0 01-93.34-93.34V162.67a93.62 93.62 0 0193.34-93.34h186.66m0-37.33H162.67C90.8 32 32 90.8 32 162.67v186.66C32 421.2 90.8 480 162.67 480h186.66C421.2 480 480 421.2 480 349.33V162.67C480 90.8 421.2 32 349.33 32z"/><path d="M377.33 162.67a28 28 0 1128-28 27.94 27.94 0 01-28 28zM256 181.33A74.67 74.67 0 11181.33 256 74.75 74.75 0 01256 181.33m0-37.33a112 112 0 10112 112 112 112 0 00-112-112z" fill="currentColor" /></svg>

Upvotes: 0

Related Questions