Change SVG fill="none" to fill="#FFF" when Hover? - html

Question

This SVG have 2 fill one is NONE and secound is color RED.
How I do so when it's not hover one stay in NONE, then when it's hover it change to color?
By the way it's right now, it only change the one that is red of the
.icon{
fill: red;
transition: all 200ms ease-out;
}
.icon:hover{
fill: blue;
}
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="22" viewBox="0 0 24 22">
<path fill="none" d="M17.73,3c-3.26,0-5,3.47-5.73,5-.75-1.54-2.48-5-5.72-5A4.05,4.05,0,0,0,2,7.19c0,3.44,4.74,7.85,10,13,5.26-5.15,10-9.56,10-13A4.06,4.06,0,0,0,17.73,3Z" transform="translate(0 -1)" />
<path fill="#ff0000" d="M17.73,1A6.53,6.53,0,0,0,12,4.25,6.51,6.51,0,0,0,6.28,1,6,6,0,0,0,0,7.19C0,11.85,5.57,16.62,12,23c6.43-6.38,12-11.15,12-15.81A6,6,0,0,0,17.73,1ZM12,20.19C6.74,15,2,10.63,2,7.19A4.05,4.05,0,0,1,6.28,3c3.24,0,5,3.49,5.72,5,.75-1.55,2.47-5,5.73-5A4.06,4.06,0,0,1,22,7.19C22,10.63,17.26,15,12,20.19Z" transform="translate(0 -1)"/>
</svg>

Answer 1

Try adding a wrapper class and giving css fill to the svg path. This is a sample code. Hope it helps
.svg-wrapper svg path{
fill: red;
transition: all 200ms ease-out;
}
.svg-wrapper svg path:hover{
fill: blue;
}
<div class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="22" viewBox="0 0 24 22">
<path fill="none" d="M17.73,3c-3.26,0-5,3.47-5.73,5-.75-1.54-2.48-5-5.72-5A4.05,4.05,0,0,0,2,7.19c0,3.44,4.74,7.85,10,13,5.26-5.15,10-9.56,10-13A4.06,4.06,0,0,0,17.73,3Z" transform="translate(0 -1)" />
<path fill="#ff0000" d="M17.73,1A6.53,6.53,0,0,0,12,4.25,6.51,6.51,0,0,0,6.28,1,6,6,0,0,0,0,7.19C0,11.85,5.57,16.62,12,23c6.43-6.38,12-11.15,12-15.81A6,6,0,0,0,17.73,1ZM12,20.19C6.74,15,2,10.63,2,7.19A4.05,4.05,0,0,1,6.28,3c3.24,0,5,3.49,5.72,5,.75-1.55,2.47-5,5.73-5A4.06,4.06,0,0,1,22,7.19C22,10.63,17.26,15,12,20.19Z" transform="translate(0 -1)"/>
</svg>
</div>

Answer 2

You can animate it with an SVG tag. Here is how you would animate the fill property back and forth with an hover effect on a square:
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="100" fill='#000000'>
<animate attributeType="XML" attributeName="fill" from="#000000" to="#ff0000"
dur="0.5s" repeatCount="1" begin='mouseover' fill='freeze'/>
<animate attributeType="XML" attributeName="fill" from="#ff0000" to="#000000"
dur="0.5s" repeatCount="1" begin='mouseout' fill='freeze'/>
</rect>
</svg>
When this SVG is placed on a page it will turn red when you rollover it and go back to black when rolling out.