React导航栏SVG图标Hover变色失效问题及代码示例

问题根源在于你用<img>标签引入SVG时，SVG内部硬编码了fill="#89867e"，CSS无法穿透<img>标签修改其内部SVG的样式，导致悬停效果不生效。下面提供三种可行的解决方案：

方案一：将SVG作为React组件引入（推荐，灵活性最高） #

把SVG转换成React组件，移除内部固定的fill值，通过CSS类控制颜色和悬停效果：

1. 创建TwitchIcon.js组件：

import React from 'react';

export default function TwitchIcon({ className }) {
  return (
    <svg 
      xmlns="http://www.w3.org/2000/svg" 
      viewBox="0,0,256,256" 
      className={className}
      fill="currentColor" // 让颜色继承父元素的color属性
    >
      <g fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
        <g transform="scale(10.66667,10.66667)">
          <path d="M19.98,5.69c-1.68,-1.34 -4.08,-1.71 -5.12,-1.82h-0.04c-0.16,0 -0.31,0.09 -0.36,0.24c-0.09,0.23 0.05,0.48 0.28,0.52c1.17,0.24 2.52,0.66 3.75,1.43c0.25,0.15 0.31,0.49 0.11,0.72c-0.16,0.18 -0.43,0.2 -0.64,0.08c-2.4,-1.48 -5.38,-1.56 -5.96,-1.56c-0.58,0 -3.56,0.08 -5.96,1.56c-0.21,0.12 -0.48,0.1 -0.64,-0.08c-0.2,-0.23 -0.14,-0.57 0.11,-0.72c1.23,-0.77 2.58,-1.19 3.75,-1.43c0.23,-0.04 0.37,-0.29 0.28,-0.52c-0.05,-0.15 -0.2,-0.24 -0.36,-0.24h-0.04c-1.04,0.11 -3.44,0.48 -5.12,1.82c-0.98,0.91 -2.93,6.14 -3.02,10.77c0,0.31 0.08,0.62 0.26,0.87c1.17,1.65 3.71,2.64 5.63,2.78c0.29,0.02 0.57,-0.11 0.74,-0.35c0.01,0 0.01,-0.01 0.02,-0.02c0.35,-0.48 0.14,-1.16 -0.42,-1.37c-1.6,-0.59 -2.42,-1.29 -2.47,-1.34c-0.2,-0.18 -0.22,-0.48 -0.05,-0.68c0.18,-0.2 0.48,-0.22 0.68,-0.04c0.03,0.02 2.25,1.91 6.61,1.91c4.36,0 6.58,-1.89 6.61,-1.91c0.2,-0.18 0.5,-0.16 0.68,0.04c0.17,0.2 0.15,0.5 -0.05,0.68c-0.05,0.05 -0.87,0.75 -2.47,1.34c-0.56,0.21 -0.77,0.89 -0.42,1.37c0.01,0.01 0.01,0.02 0.02,0.02c0.17,0.24 0.45,0.37 0.74,0.35c1.92,-0.14 4.46,-1.13 5.63,-2.78c0.18,-0.25 0.26,-0.56 0.26,-0.87c-0.09,-4.63 -2.04,-9.86 -3.02,-10.77zM8.89,14.87c-0.92,0 -1.67,-0.86 -1.67,-1.91c0,-1.06 0.75,-1.92 1.67,-1.92c0.93,0 1.67,0.86 1.67,1.92c0,1.05 -0.74,1.91 -1.67,1.91zM15.11,14.87c-0.93,0 -1.67,-0.86 -1.67,-1.91c0,-1.06 0.74,-1.92 1.67,-1.92c0.92,0 1.67,0.86 1.67,1.92c0,1.05 -0.75,1.91 -1.67,1.91z"></path>
        </g>
      </g>
    </svg>
  );
}

2. 修改NavDesktopSocials组件：

import React from "react";
import TwitchIcon from "./TwitchIcon";

export default function NavDesktopSocials() {
  return (
    <div className="flex items-center social-links">
      <div className="flex justify-center my-6">
          <a 
            href="/twitch" 
            rel="noopener noreferrer" 
            target="_blank"
            className="twitch-link"
          >
            <TwitchIcon className="w-8 mx-1" />
          </a>
      </div>
    </div>
  );
}

3. 添加CSS样式：

.twitch-link {
  color: #89867e; /* 默认颜色 */
}

.twitch-link:hover {
  color: #6441a5; /* Twitch品牌色，可替换成你想要的悬停颜色 */
}

方案二：修改SVG文件，用CSS控制颜色 #

直接修改你的SVG文件，把内部的fill="#89867e"替换成fill="currentColor"，然后通过控制父元素的color属性实现悬停效果：

修改后的SVG示例：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,256,256" width="96px" height="96px" fill-rule="nonzero">
  <g fill="currentColor" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
    <g transform="scale(10.66667,10.66667)">
      <path d="M19.98,5.69c-1.68,-1.34 -4.08,-1.71 -5.12,-1.82h-0.04c-0.16,0 -0.31,0.09 -0.36,0.24c-0.09,0.23 0.05,0.48 0.28,0.52c1.17,0.24 2.52,0.66 3.75,1.43c0.25,0.15 0.31,0.49 0.11,0.72c-0.16,0.18 -0.43,0.2 -0.64,0.08c-2.4,-1.48 -5.38,-1.56 -5.96,-1.56c-0.58,0 -3.56,0.08 -5.96,1.56c-0.21,0.12 -0.48,0.1 -0.64,-0.08c-0.2,-0.23 -0.14,-0.57 0.11,-0.72c1.23,-0.77 2.58,-1.19 3.75,-1.43c0.23,-0.04 0.37,-0.29 0.28,-0.52c-0.05,-0.15 -0.2,-0.24 -0.36,-0.24h-0.04c-1.04,0.11 -3.44,0.48 -5.12,1.82c-0.98,0.91 -2.93,6.14 -3.02,10.77c0,0.31 0.08,0.62 0.26,0.87c1.17,1.65 3.71,2.64 5.63,2.78c0.29,0.02 0.57,-0.11 0.74,-0.35c0.01,0 0.01,-0.01 0.02,-0.02c0.35,-0.48 0.14,-1.16 -0.42,-1.37c-1.6,-0.59 -2.42,-1.29 -2.47,-1.34c-0.2,-0.18 -0.22,-0.48 -0.05,-0.68c0.18,-0.2 0.48,-0.22 0.68,-0.04c0.03,0.02 2.25,1.91 6.61,1.91c4.36,0 6.58,-1.89 6.61,-1.91c0.2,-0.18 0.5,-0.16 0.68,0.04c0.17,0.2 0.15,0.5 -0.05,0.68c-0.05,0.05 -0.87,0.75 -2.47,1.34c-0.56,0.21 -0.77,0.89 -0.42,1.37c0.01,0.01 0.01,0.02 0.02,0.02c0.17,0.24 0.45,0.37 0.74,0.35c1.92,-0.14 4.46,-1.13 5.63,-2.78c0.18,-0.25 0.26,-0.56 0.26,-0.87c-0.09,-4.63 -2.04,-9.86 -3.02,-10.77zM8.89,14.87c-0.92,0 -1.67,-0.86 -1.67,-1.91c0,-1.06 0.75,-1.92 1.67,-1.92c0.93,0 1.67,0.86 1.67,1.92c0,1.05 -0.74,1.91 -1.67,1.91zM15.11,14.87c-0.93,0 -1.67,-0.86 -1.67,-1.91c0,-1.06 0.74,-1.92 1.67,-1.92c0.92,0 1.67,0.86 1.67,1.92c0,1.05 -0.75,1.91 -1.67,1.91z"></path>
    </g>
  </g>
</svg>

然后添加CSS：

.social-links a {
  color: #89867e;
}

.social-links a:hover {
  color: #6441a5;
}

方案三：使用CSS Filter快速调整颜色（适合临时场景） #

如果不想修改SVG或组件，可通过CSS滤镜调整颜色，缺点是颜色控制不够精准：

.social-links img:hover {
  filter: invert(30%) sepia(80%) saturate(1000%) hue-rotate(220deg);
  /* 上面的滤镜值可根据需要调整，得到你想要的颜色 */
}

内容的提问来源于stack exchange，提问作者VersifiXion