SVG CSS 悬停隐藏阴影

Question

我需要的是 SVG 消失，但阴影保持悬停。我得到的是 SVG 和阴影都消失了。

div > svg {
  color: black;
  filter: drop-shadow(0px 0px 6px red);
}

div:hover > svg {
  color: transparent;
}

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

<div>
  <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>

如何更改 CSS 以获得我需要的内容？

Answer 1

您可以尝试用

color:white

代替

transparent

div > svg {
  color: black;
  filter: drop-shadow(0px 0px 6px red);
}

div:hover > svg {
  color: white;
}

<div>
     <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 384 512" height="5em" width="5em" xmlns="http://www.w3.org/2000/svg"><path d="M0 192H176V0H160C71.6 0 0 71.6 0 160v32zm0 32V352c0 88.4 71.6 160 160 160h64c88.4 0 160-71.6 160-160V224H192 0zm384-32V160C384 71.6 312.4 0 224 0H208V192H384z"></path>          </svg>
 </div>