如何通过Mask/Filter为现有SVG文件添加带阴影的Extrusion效果？

我希望为现有SVG文件创建带阴影的Extrusion（挤出）效果。我的思路是保留源文件不变，将其作为资源引入另一个容器SVG文件，仅通过Mask/Filter实现该效果。这种方式可让我在多个SVG文件上复用该效果，按需添加或组合其他效果，且无需修改源文件。

源文件：example.svg #

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 5 5" stroke-width="2">
<path stroke="#000" d="m0,1h5"/>
<path stroke="#444" d="m0,2h5"/>
<path stroke="#888" d="m0,3h5"/>
<path stroke="#CCC" d="m0,4h5"/>
<path stroke="#FFF" d="m0,5h5"/>
</svg>

容器文件：extruded.svg（待完善） #

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
<mask id="extrusion">
<!-- Mask definition to be replaced -->
<rect x="0" y="0" width="400" height="400" fill="white" />
</mask>
<image href="example.svg" mask="url(#extrusion)"/>
</svg>

参考效果对比：

请问这种实现方式是否可行？

这种方案完全可行，而且是复用SVG效果的优雅方式。我们可以通过**滤镜（Filter）+ 遮罩（Mask）**的组合实现需求，不需要修改源SVG文件，以下是完善后的容器SVG代码：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="440" viewBox="0 0 5 5.5">
  <!-- 定义挤出阴影滤镜 -->
  <filter id="extrusionShadow" x="-20%" y="-20%" width="140%" height="140%">
    <!-- 提取源图形的Alpha通道作为阴影基础 -->
    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0
                                                         0 0 0 0 0
                                                         0 0 0 0 0
                                                         0 0 0 1 0" />
    <!-- 模糊阴影 -->
    <feGaussianBlur stdDeviation="0.1" result="blur" />
    <!-- 偏移阴影，模拟挤出方向（向下偏移） -->
    <feOffset dx="0" dy="0.3" result="offsetBlur" />
    <!-- 给阴影添加渐变透明度，增强立体感 -->
    <feComponentTransfer>
      <feFuncA type="linear" slope="0.6" intercept="0" />
    </feComponentTransfer>
    <!-- 合并阴影与原图形 -->
    <feMerge>
      <feMergeNode in="offsetBlur" />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>

  <!-- 定义挤出遮罩：控制显示区域 -->
  <mask id="extrusionMask">
    <!-- 引入源SVG作为遮罩基础 -->
    <image href="example.svg" width="400" height="400" viewBox="0 0 5 5" />
    <!-- 绘制挤出延伸区域（白色表示允许显示） -->
    <rect x="0" y="1" width="5" height="0.5" fill="white" />
  </mask>

  <!-- 组合应用效果 -->
  <g mask="url(#extrusionMask)" filter="url(#extrusionShadow)">
    <image href="example.svg" width="400" height="400" viewBox="0 0 5 5" />
    <!-- 绘制挤出部分的渐变填充，匹配源图形风格 -->
    <rect x="0" y="1" width="5" height="0.5" fill="url(#extrusionGradient)" />
  </g>

  <!-- 定义挤出区域的渐变 -->
  <linearGradient id="extrusionGradient" x1="0" y1="1" x2="0" y2="1.5">
    <stop offset="0%" stop-color="#000" />
    <stop offset="25%" stop-color="#444" />
    <stop offset="50%" stop-color="#888" />
    <stop offset="75%" stop-color="#CCC" />
    <stop offset="100%" stop-color="#FFF" />
  </linearGradient>
</svg>

核心说明： #

• 滤镜：通过模糊+偏移生成阴影，模拟挤出的立体效果，调整透明度让阴影更自然。
• 遮罩：限定显示范围，确保只有原图形和挤出延伸部分可见，避免冗余内容。
• 复用性：只需替换容器中href属性的源SVG路径，就能快速给其他SVG套用相同效果，完全无需修改源文件。
• 复杂图形适配：如果源图形不是简单线条，可使用<feMorphology>滤镜扩展图形边界，或通过路径变形生成挤出区域，保持遮罩的通用性。

内容的提问来源于stack exchange，提问作者Atmo