悬停时更改 SVG 图标的颜色答案

【问题标题】：Changing the color of SVG Icon on hover悬停时更改 SVG 图标的颜色
【发布时间】：2020-02-08 11:02:07
【问题描述】：

我一直在尝试更改悬停时 SVG 图标的颜色。我的 SVG 图标由不同的形状组成，例如圆形、矩形、多边形、路径等。

这是我的 SVG HTML：

<svg version="1.1" id="Layer_1" class="icon flag-icon1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="54px" viewBox="0 0 64 54" enable-background="new 0 0 64 54" xml:space="preserve">
  <rect x="0.1" y="0" display="none" fill="#FFFFFF" width="63.9" height="54"></rect>
  <g>
    <g>
      <polygon fill="#010101" points="37,21.6 30.2,28.5 26.8,25 24.9,26.9 30.4,32.4 39.2,23.8       "></polygon>
    </g>
  </g>
  <g>
    <g>
      <path fill="#010101" d="M32,13c-7.7,0-14,6.3-14,14c0,7.7,6.3,14,14,14s14-6.3,14-14C46,19.3,39.8,13,32,13z M32,38.5                          c-6.3,0-11.5-5.1-11.5-11.5c0-6.3,5.1-11.5,11.5-11.5c6.3,0,11.5,5.1,11.5,11.5C43.5,33.3,38.4,38.5,32,38.5z"></path>
    </g>
  </g>
</svg>

这是第一个 SVG。请提出一些方法在悬停时将其颜色更改为#ff721f。

【问题讨论】：

标签： html css svg hover

【解决方案1】：

更好的方法是稍微修改您的SVG 结构。将 SVG 形状包装在具有 fill="currentColor" 属性的 g 元素中，并从单个元素中删除 fill 属性。这样您就可以使用 CSS color 属性定义/更改 SVG 的颜色：

.flag-icon1 { color: #010101; }

.flag-icon1:hover { color: #ff721f; }

<svg version="1.1" id="Layer_1" class="icon flag-icon1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="54px" viewBox="0 0 64 54" enable-background="new 0 0 64 54" xml:space="preserve">
  <g fill="currentColor">
    <polygon points="37,21.6 30.2,28.5 26.8,25 24.9,26.9 30.4,32.4 39.2,23.8" />
    <path d="M32,13c-7.7,0-14,6.3-14,14c0,7.7,6.3,14,14,14s14-6.3,14-14C46,19.3,39.8,13,32,13z M32,38.5 c-6.3,0-11.5-5.1-11.5-11.5c0-6.3,5.1-11.5,11.5-11.5c6.3,0,11.5,5.1,11.5,11.5C43.5,33.3,38.4,38.5,32,38.5z" />
  </g>
</svg>

或者，您可以使用fill 属性覆盖悬停状态的颜色：

.flag-icon1:hover * {
  fill: #ff721f;
}

<svg version="1.1" id="Layer_1" class="icon flag-icon1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="54px" viewBox="0 0 64 54" enable-background="new 0 0 64 54" xml:space="preserve">
  <g>
    <polygon fill="#010101" points="37,21.6 30.2,28.5 26.8,25 24.9,26.9 30.4,32.4 39.2,23.8" />
  </g>
  <g>
    <path fill="#010101" d="M32,13c-7.7,0-14,6.3-14,14c0,7.7,6.3,14,14,14s14-6.3,14-14C46,19.3,39.8,13,32,13z M32,38.5 c-6.3,0-11.5-5.1-11.5-11.5c0-6.3,5.1-11.5,11.5-11.5c6.3,0,11.5,5.1,11.5,11.5C43.5,33.3,38.4,38.5,32,38.5z" />
  </g>
</svg>

【讨论】：