0

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>
Alexandr_TT
  • 13,635
  • 3
  • 27
  • 54
Tamjid
  • 4,326
  • 4
  • 23
  • 46
  • This will work: https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element. Make sure you search for topics before asking. – CleverUser123 Nov 23 '21 at 00:23
  • I have already found that and none of them worked for this svg element.. – Tamjid Nov 23 '21 at 03:52

3 Answers3

3

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>
herrstrietzel
  • 11,541
  • 2
  • 12
  • 34
0

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>
Sato Takeru
  • 1,092
  • 1
  • 5
  • 16
0

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.

Major_Flux-
  • 140
  • 9