只在三面插入陰影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>