html - 悬停时将SVG fill =“none”更改为fill =“＃FFF”。

该SVG有2个填充，一个为NONE，第二个为红色。
当它没有悬停时，我该怎么办？当它悬停时，它会变成彩色？

顺便说一句，它只是更改了红色的

   .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>



 

最佳答案

尝试添加包装器类，然后将ssg填充到svg路径。这是示例代码。希望能帮助到你

.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>

关于html - 悬停时将SVG fill =“none”更改为fill =“＃FFF”。，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57174823/