如何在SVG上实现drop-shadow悬停效果？

核心思路 #

利用SVG内部滤镜结合CSS变量实现阴影颜色动态切换，同时通过viewBox保证SVG与图片的响应式同步，无需移出子标签。

具体实现步骤 #

1. 构建响应式容器：用相对定位容器包裹图片和SVG，确保SVG能精准覆盖在图片上方并同步缩放。
2. 定义SVG内部滤镜：在SVG的<defs>中创建feDropShadow滤镜，使用CSS变量控制阴影颜色，避免依赖外部元素。
3. 设置可点击区域：在SVG内添加可点击的形状（如<rect>、<path>），设置透明填充以不遮挡图片，同时绑定滤镜和鼠标事件。
4. CSS控制悬停效果：通过:hover伪类更新CSS变量，实现阴影颜色的动态切换。

完整代码示例 #

HTML结构

<div class="image-wrapper">
  <img src="your-image.jpg" alt="目标图片">
  <svg viewBox="0 0 800 600" class="overlay-svg">
    <!-- 定义可复用的阴影滤镜 -->
    <defs>
      <filter id="dynamic-shadow">
        <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="var(--shadow-color, #cccccc)" />
      </filter>
    </defs>
    <!-- 可点击区域，替换为你需要的形状/坐标 -->
    <rect x="150" y="120" width="220" height="180" class="click-target" filter="url(#dynamic-shadow)" />
  </svg>
</div>

CSS样式

.image-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px; /* 与SVG viewBox的宽一致，保证比例匹配 */
  margin: 0 auto;
}

.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

.overlay-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.click-target {
  fill: transparent; /* 透明填充，不遮挡下方图片 */
  cursor: pointer;
  --shadow-color: #cccccc; /* 默认阴影颜色 */
}

.click-target:hover {
  --shadow-color: #2563eb; /* 悬停时的阴影颜色 */
}

关键注意事项 #

• viewBox匹配：SVG的viewBox尺寸必须与原图的宽高比例完全一致，否则响应式缩放时可点击区域会错位。
• 鼠标事件响应：可点击形状默认开启pointer-events，透明填充状态下仍能正常接收鼠标事件。
• 滤镜作用范围：滤镜直接应用在可点击形状上，不会影响SVG其他元素或下方图片。

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