在隐藏的 svg 路径上应用阴影

Question

这里是pen

当使用以下技术之一隐藏矩形时，我想在矩形上应用投影效果：

opacity:0 // or  
fill:rgba(1,1,1,0)  // or  
fill-opacity:0  // or  
display:none 

当我尝试对此类元素应用过滤器时，阴影根本不会出现...

是否可以在隐藏的 Svg 路径上应用投影？如何？

Answer 1

最简单的方法是使用掩码。

在下面的演示中，我们为圆​​形添加了阴影。然后我们构造遮罩，使其隐藏圆圈本身，但保留圆圈之外的区域（即阴影）。显示它后面的红色矩形。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="4" dy="8" stdDeviation="4"/>
    </filter>
    <mask id="invisible">
      <rect width="100%" height="100%" fill="white"/>
      <circle cx="50%" cy="50%" r="80" fill="black"/>
    </mask>
  </defs>

  <rect x="40" y="60" width="150" height="80" fill="red"/>

  <circle cx="50%" cy="50%" r="80"
      style="fill:blue; filter:url(#shadow); mask: url(#invisible);"/>
</svg>

Answer 2

如果您只是在寻找没有矩形的阴影，将填充设置为背景颜色将起作用：

.square{
  fill:#fff;
  width:100px;
  height:100px;
  filter:url('#drop-shadow');
}

如果矩形下方有多个元素，您可以尝试使用clip-path 或mask 仅隐藏填充区域。