应用阴影

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即可。