只在三面插入阴影SVG

Question

我想使用SVG过滤器只在三面（顶部，左侧和右侧）插入阴影。请参阅下面的代码，在所有四面添加插入阴影，看看你是否可以帮我修改它，只在三面获得阴影。谢谢！

 <svg> 
 
     <filter id="inset-shadow" x="-50%" y="-1" width="200%" height="205%"> 
 
     <feComponentTransfer in=SourceAlpha> 
 
       <feFuncA type="table" tableValues="1 0 0 0 0 0 0" /> 
 
      </feComponentTransfer> 
 
      <feGaussianBlur stdDeviation="5"/> 
 
      <feOffset dx="0" dy="0" result="offsetblur"/> 
 
      <feFlood flood-opacity="0.9" flood-color="rgb(20, 0, 0)" result="color"/> 
 
      <feComposite in2="offsetblur" operator="in"/> 
 
      <feComposite in2="SourceAlpha" operator="in"/> 
 
      <feMerge> 
 
       <feMergeNode in="SourceGraphic" /> 
 
       <feMergeNode /> 
 
      </feMerge>  
 
     </filter> 
 
     <filter id="inset-shadow1" x="-50%" y="0" width="200%" height="200%"> 
 
     <feComponentTransfer in=SourceAlpha> 
 
       <feFuncA type="table" tableValues="1 0" /> 
 
      </feComponentTransfer> 
 
      <feGaussianBlur stdDeviation="5"/> 
 
      <feOffset dx="0" dy="-1" result="offsetblur"/> 
 
      <feFlood flood-color="rgb(20, 0, 0)" result="color"/> 
 
      <feComposite in2="offsetblur" operator="in"/> 
 
      <feComposite in2="SourceAlpha" operator="in" /> 
 
      <feMerge> 
 
       <feMergeNode in="SourceGraphic" /> 
 
       <feMergeNode /> 
 
      </feMerge>   
 
     </filter> 
 
     </svg>

Answer 1

只需调整滤波器区域的坐标，使得它们排队与源图形的左侧或顶部边缘与调整宽度/高度，使得他们不削波右/底部边缘。像这样：

 <svg width="800px" height="600px"> 
 
      <defs> 
 
     <filter id="inset-shadow" x="0%" y="-100%" width="200%" height="205%"> 
 
     <feComponentTransfer in=SourceAlpha> 
 
       <feFuncA type="table" tableValues="1 0 0 0 0 0 0" /> 
 
      </feComponentTransfer> 
 
      <feGaussianBlur stdDeviation="5"/> 
 
      <feOffset dx="0" dy="0" result="offsetblur"/> 
 
      <feFlood flood-opacity="0.9" flood-color="rgb(20, 0, 0)" result="color"/> 
 
      <feComposite in2="offsetblur" operator="in"/> 
 
      <feComposite in2="SourceAlpha" operator="in"/> 
 
      <feMerge> 
 
       <feMergeNode in="SourceGraphic" /> 
 
       <feMergeNode /> 
 
      </feMerge>  
 
     </filter> 
 
     <filter id="inset-shadow1" x="-100%" y="0%" width="250%" height="200%"> 
 
     <feComponentTransfer in=SourceAlpha> 
 
       <feFuncA type="table" tableValues="1 0" /> 
 
      </feComponentTransfer> 
 
      <feGaussianBlur stdDeviation="5"/> 
 
      <feOffset dx="0" dy="-1" result="offsetblur"/> 
 
      <feFlood flood-color="rgb(20, 0, 0)" result="color"/> 
 
      <feComposite in2="offsetblur" operator="in"/> 
 
      <feComposite in2="SourceAlpha" operator="in" /> 
 
      <feMerge> 
 
       <feMergeNode in="SourceGraphic" /> 
 
       <feMergeNode /> 
 
      </feMerge>   
 
     </filter> 
 
      </defs> 
 
      <rect filter="url(#inset-shadow)" fill="white" x="100" y="100" width="200" height="200"/> 
 
      <rect filter="url(#inset-shadow1)" fill="white" x="100" y="400" width="200" height="200"/>   
 
     </svg>