使用feComposite致SVG元素位移，求合并圆角线与矩形的正确方法

位移原因 #

使用feComposite滤镜出现错位的核心原因：

• feImage引用元素时，会基于元素的**边界框（BBox）**渲染：line元素的BBox包含了stroke-width和stroke-linecap扩展出的区域，而path的BBox仅对应自身路径范围，两者原点与范围不一致，导致合成时位置偏移。
• 原代码将滤镜直接应用在包含两个元素的<g>上，会同时渲染原元素和滤镜合成结果，造成叠加错位。

解决方案 #

方案1：直接合并为单个<path>（推荐） #

这是性能最优、无错位问题的方法，将线条和矩形的路径合并成一个<path>元素，直接作为单个实体：

<svg width="350" height="200">
  <!-- 合并后的单个path，同时实现圆角线条和矩形效果 -->
  <path 
    d="M75,25 
       L100,25 
       L100,50 
       L300,50 
       M100,50 
       L100,75 
       L75,75 
       Z"
    stroke-width="20"
    stroke="rgba(0,0,0,0.5)"
    stroke-linecap="round"
    fill="rgba(0,0,0,0.5)"
  />
</svg>

若需要更精准的视觉效果，可调整路径节点让线条描边与矩形填充完全衔接。

方案2：修正feComposite滤镜用法 #

若必须使用滤镜，需将原元素隐藏在<defs>中，并统一feImage的渲染范围：

<svg width="350" height="200">
  <defs>
    <!-- 原元素放在defs里，不直接显示 -->
    <line id="layer1" x1="100" y1="50" x2="300" y2="50" stroke-width="20" stroke="rgba(0,0,0,0.5)" stroke-linecap="round" />
    <path id="layer2" d="M100,50 L100,25 L75,25 L75,75 L100,75 Z" fill="rgba(0,0,0,0.5)" />
    
    <filter id="myfilter1" x="0" y="0" width="100%" height="100%">
      <!-- 给feImage指定统一的画布范围，确保对齐 -->
      <feImage href="#layer1" result="lay1" x="0" y="0" width="350" height="200" />
      <feImage href="#layer2" result="lay2" x="0" y="0" width="350" height="200" />
      <feComposite operator="xor" in="lay2" in2="lay1" result="final" />
    </filter>
  </defs>
  
  <!-- 用矩形承载滤镜结果 -->
  <rect width="350" height="200" filter="url(#myfilter1)" fill="none" />
</svg>

方案3：使用mask实现合并 #

通过遮罩将两个形状合并为单个视觉实体，适合复杂场景：

<svg width="350" height="200">
  <defs>
    <mask id="shapeMask">
      <line x1="100" y1="50" x2="300" y2="50" stroke-width="20" stroke="#fff" stroke-linecap="round" />
      <path d="M100,50 L100,25 L75,25 L75,75 L100,75 Z" fill="#fff" />
    </mask>
  </defs>
  
  <!-- 用单个矩形作为载体，通过mask显示合并后的形状 -->
  <rect width="350" height="200" mask="url(#shapeMask)" fill="rgba(0,0,0,0.5)" />
</svg>

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