当悬停时将SVG fill="none“更改为fill="#FFF”？

Question

这个SVG有2个填充，一个是无，第二个是红色。当它没有悬停时，我怎么做?当它悬停时，它会变成颜色吗？

顺便说一句，它现在只改变了红色的

​

   .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

尝试添加一个包装类，并向svg路径提供css填充。这是一个示例代码。希望能有所帮助

​

.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

您可以使用SVG标签对其进行动画处理。下面是如何在正方形上使用悬停效果来回设置fill属性的动画：

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

当这个SVG被放在一个页面上时，当你翻转它时它会变成红色，当你滚动它时它会变回黑色。