如何修改CSS实现SVG悬停时隐藏图形但保留drop-shadow？

要实现鼠标悬停时SVG图形消失但投影保留的效果，核心是将SVG图形和投影效果分离，避免投影随图形一起消失。具体修改如下：

修改后的CSS代码 #

div {
  position: relative;
  display: inline-block; /* 让容器自适应SVG尺寸 */
}

/* 用于生成投影的底层SVG */
div > svg:first-child {
  position: absolute;
  opacity: 0; /* 隐藏图形，仅保留形状用于生成投影 */
  color: black; /* 与原图形颜色一致，确保投影基于正确形状生成 */
  filter: drop-shadow(0px 0px 6px red); /* 投影效果 */
}

/* 显示在顶层的交互SVG */
div > svg:last-child {
  color: black;
  position: relative;
  z-index: 1; /* 确保顶层SVG在投影上方 */
}

/* 悬停时隐藏顶层SVG图形 */
div:hover > svg:last-child {
  color: transparent;
}

修改后的HTML代码 #

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <g id="ico">
    <path fill="currentColor" d="M20.3..." />
  </g>
</svg>

<div>
  <!-- 底层SVG：仅用于生成投影，不可见 -->
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <use href="#ico"></use>
  </svg>
  <!-- 顶层SVG：用于交互，悬停时消失 -->
  <svg style="background-color: transparent;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="button">
    <title>A title here</title>
    <use href="#ico"></use>
  </svg>
</div>

原理说明 #

• 在容器div中添加两个完全相同的SVG：
  1. 底层SVG：通过opacity: 0隐藏图形，但保留其形状，同时设置drop-shadow生成投影。由于它的color与原图形一致，投影会基于SVG的正确形状生成。
  2. 顶层SVG：正常显示图形，通过z-index: 1确保它在投影上方。
• 当鼠标悬停在div上时，顶层SVG的color被设为transparent，图形消失，露出底层SVG生成的投影，从而实现需求。

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