仅在 3 面 SVG 上插入阴影答案

【问题标题】：Inset shadow only on 3 sides SVG仅在 3 面 SVG 上插入阴影
【发布时间】：2015-11-15 10:21:43
【问题描述】：

我正在尝试使用 SVG 过滤器仅在 3 个侧面（顶部、左侧和右侧）上获得嵌入阴影。请参阅下面的代码，它在所有四个侧面都添加了嵌入阴影，看看您是否可以帮我修改它以仅在 3 个侧面上获得阴影。谢谢！

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

【问题讨论】：

标签： html svg svg-filters

【解决方案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>

【讨论】：