Question

这是pen

我想在使用以下技术之一隐藏rect时对rect应用阴影效果：

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');
}

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

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

2 个答案: