悬停时将 SVG fill="none" 更改为 fill="#FFF"？答案

【问题标题】：Change SVG fill="none" to fill="#FFF" when Hover?悬停时将 SVG fill="none" 更改为 fill="#FFF"？
【发布时间】：2019-07-24 23:06:05
【问题描述】：

这个 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>

【问题讨论】：

标签： html css svg

【解决方案1】：

尝试添加一个包装类并将 css 填充到 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>

【讨论】：

【解决方案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 放置在页面上时，它会在滚动时变为红色，在滚动时会变回黑色。

【讨论】：