如何在 SVG 上使用投影？答案

【问题标题】：How to use drop-shadow on SVG?如何在 SVG 上使用投影？
【发布时间】：2022-07-20 16:29:16
【问题描述】：

我在图像顶部使用 SVG 以使图像的特定部分可点击，如果您将鼠标悬停在 svg 区域上，我试图使 drop-shadow 属性更改颜色。

这是图片

这是我写的代码

<div class="parent">
      <svg version="1.1" viewBox="0 0 735 916">
        <image width="735" height="916" href={pathToImage}></image>{" "}
        <a href="/">
          <rect
            class="child"
            x="539"
            y="642"
            fill="#fff"
            opacity="0"
            width="166"
            height="174"
          ></rect>
        </a>
      </svg>
    </div>

CSS

.parent {
  width: 100%;
  max-width: 800px;
  height: auto;
  z-index: 1;
}

.child {
  transition: 0.4s;
  mix-blend-mode: lighten; /* work the best with the default black fill of svg shapes */
  cursor: pointer;
  z-index: 2;
}
.child:hover {
  -webkit-filter: drop-shadow(3px 3px 2px rgba(255, 162, 0, 0.876));
  filter: drop-shadow(3px 3px 2px rgba(255, 153, 0, 0.935));
}

我使用 z-index 来确保悬停效果出现在图像顶部。但这不起作用，我无法弄清楚原因。

我不能将child 标签放在svg 标签中，因为这样图像就没有响应了。就好像您调整图像的大小，图像会做出响应，但顶部的 svg 位置保持不变。

如何在此处使用拖放效果？

【问题讨论】：

标签： html css svg

【解决方案1】：

看看这篇文章。可能会有所帮助：https://css-tricks.com/adding-shadows-to-svg-icons-with-css-and-svg-filters/

【讨论】：