React中含多path的SVG hover时不变色问题排查

问题 #

实现鼠标悬停在SVG容器上时SVG变色，4个SVG图标中3个可正常生效，但其中一个包含多个<path>元素的SVG无法触发hover变色，怀疑是多path元素导致的问题？

相关代码：

{/* toggle open projects tab */}
<a className="sidebarIcon" href="#">
  <svg
    className="sidebarSvg"
    width="50px"
    height="50px"
    version="1.0"
    viewBox="0 0 168.000000 149.000000"
  >
    <g
      transform="translate(0.000000,149.000000) scale(0.100000,-0.100000)"
      fill="#818181"
      stroke="none"
    >
      <path d="M1045 1433 c-88 -29 -168 -56 -177 -59 -16 -5 -18 2 -18 45 l0 51 -190 0 -190 0 0 -730 0 -730 190 0 190 0 0 677 c0 373 4 673 9 668 4 -6 42 -111 84 -235 91 -273 379 -1114 381 -1117 1 -1 81 23 178 54 l176 56 -135 396 c-74 218 -177 522 -230 676 -52 154 -98 285 -102 291 -4 8 -58 -6 -166 -43z"></path>
      <path d="M0 740 l0 -730 190 0 190 0 0 730 0 730 -190 0 -190 0 0 -730z"></path>
    </g>
  </svg>
</a>

解答 #

不是多path元素的问题，核心原因是这个SVG的<g>元素设置了内联fill="#818181"样式，内联样式的优先级远高于CSS中的hover样式，导致hover时无法覆盖原有颜色。

解决方法 #

1. 移除内联fill样式，改用CSS控制颜色
   去掉<g>标签里的fill="#818181"，然后通过CSS统一设置初始色和hover色：

   .sidebarSvg {
     fill: #818181;
   }
   .sidebarIcon:hover .sidebarSvg {
     fill: #your-desired-hover-color; /* 替换为你需要的hover颜色 */
   }
   

   修改后的SVG结构：

   <a className="sidebarIcon" href="#">
     <svg
       className="sidebarSvg"
       width="50px"
       height="50px"
       version="1.0"
       viewBox="0 0 168.000000 149.000000"
     >
       <g
         transform="translate(0.000000,149.000000) scale(0.100000,-0.100000)"
         stroke="none"
       >
         <path d="M1045 1433 c-88 -29 -168 -56 -177 -59 -16 -5 -18 2 -18 45 l0 51 -190 0 -190 0 0 -730 0 -730 190 0 190 0 0 677 c0 373 4 673 9 668 4 -6 42 -111 84 -235 91 -273 379 -1114 381 -1117 1 -1 81 23 178 54 l176 56 -135 396 c-74 218 -177 522 -230 676 -52 154 -98 285 -102 291 -4 8 -58 -6 -166 -43z"></path>
         <path d="M0 740 l0 -730 190 0 190 0 0 730 0 730 -190 0 -190 0 0 -730z"></path>
       </g>
     </svg>
   </a>
   

2. （不推荐）使用!important强制覆盖
   如果无法修改SVG结构，可在hover样式中添加!important强制覆盖内联样式：

   .sidebarIcon:hover .sidebarSvg g path {
     fill: #your-desired-hover-color !important;
   }
   

   这种方法会破坏CSS优先级规则，仅作为临时解决方案。

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