如何实现SVG hover时仅线条变色、内部区域保持透明的效果

你为整个<svg>元素设置了hover状态下的fill属性，SVG的属性支持继承，所有未单独声明fill属性的子路径都会继承父级svg的填充色。你的SVG中购物车轮廓的path没有单独设置fill属性，原本继承的是svg根节点的fill="none"，hover时根节点fill变为蓝色后，轮廓path就会继承到蓝色填充，把内部空白区域填满，导致不符合预期。

方案1：调整CSS选择器，仅给需要填充的路径设置hover填充 #

无需修改HTML代码，仅调整hover相关的CSS即可，将fill规则限定给原本就带有fill属性的路径（也就是购物车的两个轮子），stroke规则可以保留全局设置：

/* 全局修改描边色，所有路径的描边hover时都变色 */
svg:hover {
  stroke: #40bfff;
}
/* 仅给原生带fill属性的路径设置hover填充色，避免空白区域被填充 */
svg:hover path[fill] {
  fill: #40bfff;
}

该方案适配性更强，如果后续你给其他路径新增了fill属性也会自动生效。

方案2：给不需要填充的路径主动添加fill="none" #

找到购物车轮廓对应的path标签，手动添加fill="none"属性，这样它的填充状态就不会被父级svg的属性覆盖：

<path d="M1 1h2.25L5.5 14.5h11.25L19 4.375H4.375" stroke="#9098B1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>

该方案优先级更高，就算后续有其他全局样式修改也不会影响该路径的填充状态。

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