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

Question

这里是 pen

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

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

当我尝试在这些元素上应用过滤器时，阴影根本没有出现......

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

Answer 1

最简单的方法是使用 mask 。

在下面的演示中，我们为圆​​圈添加了阴影。然后我们构建 mask ，使其隐藏圆圈本身，但保留圆圈外的区域(即阴影)。露出它后面的红色矩形。

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