SVG中多次应用图形滤镜遇问题：feImage引用后图形偏移截断

核心问题原因 #

用<feImage>引用带滤镜的元素时出现偏移和截断，主要是两个原因：

1. 模糊滤镜会让图形范围向外扩展，但如果滤镜的x/y没设为负数、width/height没放大，模糊后的边缘会被截断，<feImage>拿到的就是不完整的图形。
2. <feImage>默认以(0,0)为起点渲染引用的元素，如果原元素不在坐标系原点，就会出现位置偏移。

最优解决方案：合并所有滤镜步骤 #

不要分开用两个滤镜再通过<feImage>引用，直接把所有操作整合到一个滤镜里，用result属性传递中间结果，既避免坐标问题，又更高效。

示例代码：

<svg width="500" height="500">
  <!-- 定义合并后的滤镜 -->
  <filter id="combined-filter" x="-50" y="-50" width="400" height="300">
    <!-- 第一步：处理第一个矩形 - 模糊+颜色矩阵 -->
    <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur-rect1"/>
    <feColorMatrix in="blur-rect1" type="matrix" 
                   values="1 0 0 0 0  
                           0 0.8 0 0 0  
                           0 0 0.5 0 0  
                           0 0 0 1 0" 
                   result="colored-blur1"/>
    
    <!-- 第二步：处理第二个矩形 - 引用+模糊+颜色矩阵 -->
    <feImage href="#rect2" result="rect2-source"/>
    <feGaussianBlur in="rect2-source" stdDeviation="8" result="blur-rect2"/>
    <feColorMatrix in="blur-rect2" type="matrix" 
                   values="0.2 0 0 0 0  
                           0 1 0 0 0  
                           0 0 1 0 0  
                           0 0 0 1 0" 
                   result="colored-blur2"/>
    
    <!-- 混合两个处理后的结果 -->
    <feMerge>
      <feMergeNode in="colored-blur1"/>
      <feMergeNode in="colored-blur2"/>
    </feMerge>
  </filter>

  <!-- 第一个矩形，应用合并滤镜 -->
  <rect id="rect1" x="100" y="100" width="200" height="120" fill="#ff6347" filter="url(#combined-filter)"/>
  <!-- 第二个矩形，作为滤镜的输入源（设为透明避免直接显示） -->
  <rect id="rect2" x="180" y="180" width="180" height="100" fill="#4682b4" opacity="0"/>
</svg>

说明：第二个矩形设为opacity="0"，仅作为滤镜输入；滤镜的x/y设为负数、width/height放大，确保模糊后的图形不会被截断。

如果一定要用feImage引用的修复方法 #

如果必须分开滤镜，按以下步骤调整：

1. 给第一个模糊滤镜设置足够大的范围，容纳模糊扩展：

<filter id="blur-filter" x="-30" y="-30" width="260" height="160">
  <feGaussianBlur stdDeviation="15"/>
</filter>
<rect id="blurred-rect" x="100" y="100" width="200" height="100" fill="#ff6347" filter="url(#blur-filter)"/>

这里x="-30"、y="-30"是因为模糊半径15，扩展范围约为半径的2倍，四周各留30的空间保证模糊边缘不被截断。

2. 在第二个滤镜里，给<feImage>显式设置位置和大小，匹配模糊后的图形范围：

<filter id="second-filter" x="-30" y="-30" width="360" height="260">
  <feImage href="#blurred-rect" x="100" y="100" width="260" height="160" result="blur-input"/>
  <!-- 后续颜色矩阵操作 -->
  <feColorMatrix in="blur-input" type="matrix" 
                 values="1 0 0 0 0  
                         0 0.5 0 0 0  
                         0 0 0.3 0 0  
                         0 0 0 1 0" 
                 result="final"/>
</filter>
<!-- 用use显示处理后的结果 -->
<use href="#blurred-rect" filter="url(#second-filter)"/>

这样就能保证<feImage>获取到完整的模糊图形，且位置匹配原元素。

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