SVG wont change colour with CSS

Question

So I have the following SVG image:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<title>ic_toggle_on_1</title>
<style>
    .circle {
        fill:#3165bd;
    }
</style>
<path class="circle" d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM6.78,11.73,3.17,8.12,4.58,6.7l2.2,2.2,4.64-4.63,1.41,1.41Z"/>
</svg>

Which I am trying to change the colour on hover with the following CSS:

.toggleCircle[data-state="open"]:hover img {
    /*fill:#047ad4;*/
    fill:red!important;
}

Which works fine if I use say border but for some reason the fill attribute cannot amend the SVG. I've read that as long as the fill isn't inline this should be overwritable by CSS and although there is change color of svg images with css this is 6 years old and I believe quite out of date.

Am I missing anything obvious as to why this SVG won't change colour?

Yes - sorry for any confusion. The image is in HTML and I want to change the colour with css. Having real difficulties! — Antony, Mar 20 '18 at 14:10
so you cannot :) you need to consider some workarounds like two svg or applying filter — Temani Afif, Mar 20 '18 at 14:10
It can definitely be done ... https://css-tricks.com/cascading-svg-fill-color/ — Antony, Mar 20 '18 at 14:12
yes if you are using SVG inside the HTML and not within an IMG — Temani Afif, Mar 20 '18 at 14:13
Unfortunately I need it to work when the data-state tag is open within the CSS. — Antony, Mar 20 '18 at 14:15
.circle { fill:#3165bd; transition:.5s; } .circle[data-state="open"]:hover { fill:red !important; } and you set the data attribute with JS or jQuery or you can manually add it as a test. — EPurpl3, Mar 20 '18 at 14:16
But the circle tag doesn't have the data-state hence why its done in the CSS file. — Antony, Mar 20 '18 at 14:18

score -1 · Answer 1 · answered Mar 20 '18 at 14:11

-1

You might need a more specific selector. More specific selectors overwrite less specific ones. Maybe try something like

.circle.my-circle:hover { fill: red }

and

<path class="circle my-circle" ...>

answered Mar 20 '18 at 14:11

Ethan Dowler

127
2
4

Unfortunately I require my css selector as it is due to a data-tag change – Antony Mar 20 '18 at 14:13

SVG wont change colour with CSS

1 Answers1