如何解决Hover时修改SVG路径填充色无效的问题？

我来帮你排查一下问题哈，你的代码主要有两个小问题导致hover效果不生效：

• 选择器路径错误：你用了.category>.svg path:hover，这里的>是直接子元素选择器，但你的.svg是嵌套在.category-item-wrapper里面的，并不是.category的直接子元素，所以这个选择器根本找不到目标路径。
• hover触发范围不合理：就算选择器对了，只给path加hover的话，只有鼠标精准移到svg路径上才会变色，用户体验很差，应该让hover整个链接区域时就触发颜色变化。

修正后的CSS代码 #

/* 当hover整个.category链接时，修改内部svg路径的填充色 */
.category:hover .svg path {
  fill: red;
}

代码解释 #

这个选择器用了**后代选择器（空格）**来匹配.category下所有的.svg里的path元素，并且把hover事件绑定在整个链接上。这样用户只要把鼠标移到链接区域内的任何地方（包括文字、svg容器），都会触发颜色变化，体验更流畅。

如果确实需要只有hover svg本身才变色，那可以用这个选择器：

.category .svg:hover path {
  fill: red;
}

完整可测试代码示例 #

<a class="category" href="#"> 
  <div class="category-item-wrapper"> 
    <svg class="svg" height="512" width="512" xmlns="http://www.w3.org/2000/svg"> 
      <g> 
        <title>Axle</title> 
        <rect fill="none" height="94.592593" id="canvas_background" width="94.592593" x="-1" y="-1"></rect> 
      </g> 
      <g> 
        <path d="m360.007032,159.628358l20.527371,0c4.176861,0 7.594292,-3.417431 7.594292,-7.594292l0,-62.493429c0,-4.176861 -3.417431,-7.594292 -7.594292,-7.594292l-20.527371,0c-4.176861,0 -7.594292,3.417431 -7.594292,7.594292l0,16.95046l-66.100718,0c-4.780607,-8.251198 -13.684914,-13.817814 -23.906831,-13.817814s-19.126224,5.566616 -23.906831,13.817814l-66.039963,0l0,-16.95046c0,-4.176861 -3.417431,-7.594292 -7.594292,-7.594292l-20.527371,0c-4.176861,0 -7.594292,3.417431 -7.594292,7.594292l0,62.493429c0,4.176861 3.417431,7.594292 7.594292,7.594292l20.527371,0c4.176861,0 7.594292,-3.417431 7.594292,-7.594292l0,-16.851734l66.685478,0c2.266896,3.53894 5.319802,6.512105 8.911902,8.703059l0,113.4891c-20.884303,6.185551 -36.133641,25.490241 -36.133641,48.383234c0,22.892993 15.249338,42.197684 36.133641,48.383234l0,7.431015c-3.945235,2.407391 -7.23736,5.764068 -9.557417,9.76626l-66.039963,0l0,-16.95046c0,-4.176861 -3.417431,-7.594292 -7.594292,-7.594292l-20.527371,0c-4.176861,0 -7.594292,3.417431 -7.594292,7.594292l0,62.493429c0,4.176861 3.417431,7.594292 7.594292,7.594292l20.527371,0c4.176861,0 7.594292,-3.417431 7.594292,-7.594292l0,-16.847937l66.685478,0c4.913507,7.670235 13.483665,12.758411 23.261316,12.758411s18.34781,-5.091973 23.261316,-12.754613l66.75003,0l0,16.847937c0,4.176861 3.417431,7.594292 7.594292,7.594292l20.527371,0c4.176861,0 7.594292,-3.417431 7.594292,-7.594292l0,-62.489632c0,-4.176861 -3.417431,-7.594292 -7.594292,-7.594292l-20.527371,0c-4.176861,0 -7.594292,3.417431 -7.594292,7.594292l0,16.95046l-66.104515,0c-2.320056,-4.005989 -5.612182,-7.358869 -9.557417,-9.76626l0,-7.431015c20.884303,-6.185551 36.133641,-25.490241 36.133641,-48.383234c0,-22.892993 -15.249338,-42.197684 -36.133641,-48.383234l0,-113.492897c3.5921,-2.190953 6.645006,-5.164119 8.911902,-8.703059l66.75003,0l0,16.851734c-0.003797,4.173063 3.413634,7.590495 7.590495,7.590495zm-71.538231,146.133164c0,14.394981 -11.66863,26.06361 -26.06361,26.06361s-26.06361,-11.66863 -26.06361,-26.06361c0,-14.394981 11.66863,-26.06361 26.06361,-26.06361s26.06361,11.66863 26.06361,26.06361z" fill="#143856" id="svg_1" stroke="null"></path> 
      </g>
    </svg> 
    <span>Axle</span> 
  </div> 
</a>

<style>
.category:hover .svg path {
  fill: red;
}
</style>

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