Unable to change the color of svg

Question

I have tried to change the color of SVG to green.

First, I tried to use fill, but it only changes the background.

<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0z" fill="green"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
</svg>

Also I have tried this answer

<style>
    img .check{
        filter: invert(24%) sepia(100%) saturate(1648%) hue-rotate(96deg) brightness(97%) contrast(105%);
    }
    
</style>
<img class="check" src="check.svg">

However, It doesn't work too. Hope for your help :-)

@Muhaddis Confused. I have already assigned `check` in my second approach. — Zheyuuu, Jun 14 '20 at 05:41
Is this what your expected output looks like? https://gyazo.com/354128bfc458b786cd2acb9ffe27d08e — Muhaddis, Jun 14 '20 at 05:45
Maybe you can answer this more detailed. I will take your answer, not mine. — Zheyuuu, Jun 14 '20 at 05:54
Not a problem @Zheyuuu. I am glad you sorted it out. There are already good answers on this topic :) — Muhaddis, Jun 14 '20 at 05:56

score 1 · Accepted Answer · edited Jun 14 '20 at 07:50

1

Add filter-class in <svg>, not in <img>

    .check{
        filter: invert(24%) sepia(100%) saturate(1648%) hue-rotate(96deg) brightness(97%) contrast(105%);
    }

<svg class='check' xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
</svg>

Get this:

edited Jun 14 '20 at 07:50

enxaneta

31,608
5
29
42

answered Jun 14 '20 at 05:51

Zheyuuu

151
1
12

Unable to change the color of svg

1 Answers1