Question

我一直试图在悬停时更改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的方法。

Answer 1

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

color

.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图标的颜色

1 个答案: