鼠标悬停无色SVG切换彩色SVG显示异常问题求助

我用SVG制作了社交媒体图标，想要实现鼠标悬停在无色SVG上时显示彩色SVG的效果，但彩色版本无法正常显示。

无色SVG代码 #

<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="22" stroke="#E2E3E4" stroke-width="2"/>
<path opacity="0.3" d="M24 20V18.5C24 18.2348 24.1054 17.9804 24.2929 17.7929C24.4804 17.6054 24.7348 17.5 25 17.5H26V15H24C23.2044 15 22.4413 15.3161 21.8787 15.8787C21.3161 16.4413 21 17.2044 21 18V20H19V23H21V31H24V23H26L27 20H24Z" fill="#131821"/>
</svg>

彩色SVG代码 #

<svg width="126" height="126" viewBox="0 0 126 126" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_74090_402)">
<circle cx="63" cy="43" r="23" fill="#4267B2"/>
</g>
<path d="M64 40V38.5C64 38.2348 64.1054 37.9804 64.2929 37.7929C64.4804 37.6054 64.7348 37.5 65 37.5H66V35H64C63.2044 35 62.4413 35.3161 61.8787 35.8787C61.3161 36.4413 61 37.2044 61 38V40H59V43H61V51H64V43H66L67 40H64Z" fill="white"/>
<defs>
<filter id="filter0_d_74090_402" x="0" y="0" width="126" height="126" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="20"/>
<feGaussianBlur stdDeviation="20"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0745098 0 0 0 0 0.0941176 0 0 0 0 0.129412 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_74090_402"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_74090_402" result="shape"/>
</filter>
</defs>
</svg>

尝试的CSS代码 #

.facebook_icon{
position: absolute; 
left: 118px;
top: 50px;
width: 46px;
height: 46px;
background-image: url('./icons/facebook_normal.svg');
}
.facebook_icon:hover{
background-image: url('./icons/facebook_icon_hover.svg');
}

当前显示效果 #

问题原因及解决办法 #

1. 核心问题：尺寸不匹配
   彩色SVG的宽高是126x126，而容器固定为46x46，加上滤镜的大偏移量和模糊值，导致图标主体被挤出容器，只显示了阴影区域。

2. 具体修复步骤

步骤1：调整彩色SVG的尺寸与布局

把彩色SVG的宽高、视口、内部元素位置统一适配46x46的容器，同时缩小滤镜的偏移和模糊值：

<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_74090_402)">
<circle cx="23" cy="23" r="22" fill="#4267B2"/>
</g>
<path d="M24 20V18.5C24 18.2348 24.1054 17.9804 24.2929 17.7929C24.4804 17.6054 24.7348 17.5 25 17.5H26V15H24C23.2044 15 22.4413 15.3161 21.8787 15.8787C21.3161 16.4413 21 17.2044 21 18V20H19V23H21V31H24V23H26L27 20H24Z" fill="white"/>
<defs>
<filter id="filter0_d_74090_402" x="0" y="0" width="46" height="46" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="5"/>
<feGaussianBlur stdDeviation="3"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0745098 0 0 0 0 0.0941176 0 0 0 0 0.129412 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_74090_402"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_74090_402" result="shape"/>
</filter>
</defs>
</svg>

步骤2：优化CSS适配规则

给容器添加background-size: contain和background-repeat: no-repeat，确保SVG完整适配容器：

.facebook_icon{
  position: absolute; 
  left: 118px;
  top: 50px;
  width: 46px;
  height: 46px;
  background-image: url('./icons/facebook_normal.svg');
  background-size: contain;
  background-repeat: no-repeat;
}
.facebook_icon:hover{
  background-image: url('./icons/facebook_icon_hover.svg');
}

备选方案：内联SVG直接切换样式

如果不想维护两张SVG文件，可以把SVG内联到HTML中，通过CSS直接修改颜色和滤镜，更高效：

<div class="facebook_icon">
  <svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle class="icon-circle" cx="23" cy="23" r="22" stroke="#E2E3E4" stroke-width="2"/>
    <path class="icon-path" opacity="0.3" d="M24 20V18.5C24 18.2348 24.1054 17.9804 24.2929 17.7929C24.4804 17.6054 24.7348 17.5 25 17.5H26V15H24C23.2044 15 22.4413 15.3161 21.8787 15.8787C21.3161 16.4413 21 17.2044 21 18V20H19V23H21V31H24V23H26L27 20H24Z" fill="#131821"/>
  </svg>
</div>

.facebook_icon{
  position: absolute; 
  left: 118px;
  top: 50px;
  width: 46px;
  height: 46px;
}
.facebook_icon:hover .icon-circle{
  stroke: none;
  fill: #4267B2;
  filter: drop-shadow(0 5px 3px rgba(7, 17, 37, 0.3));
}
.facebook_icon:hover .icon-path{
  opacity: 1;
  fill: white;
}

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