如何解决SVG裁剪操作中的线条衔接不完美问题？

如图所示，由于上方椭圆与下方图形重叠，裁剪后的描边无法完美衔接。

用户提供的原始代码：

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">

  <!-- Define the mask to hide the overlapping stroke -->

  <defs>
    <mask id="maskFaceStroke">
      <!-- White background to show everything by default -->
      <rect width="100%" height="100%" fill="white" />
      <!-- Black shape to hide the overlapping stroke -->
      <ellipse cx="150" cy="100" rx="70" ry="90" fill="black" />
    </mask>
  </defs>

  <!-- Draw the head -->
  <ellipse cx="150" cy="100" rx="70" ry="90" fill="#cce5ff" stroke="blue" stroke-width="4" />
  <!-- Draw the face fill over the head -->
  <ellipse cx="190" cy="110" rx="40" ry="60" fill="#ffe5e5" />
  <!-- Draw the face stroke over the head, but mask the part that overlaps with the head -->
  <ellipse cx="190" cy="110" rx="40" ry="60" fill="none" stroke="red" stroke-width="4" mask="url(#maskFaceStroke)" />
</svg>

用户提问：这是个常见问题，有没有现成的解决方法？我可以用JS等技术修复，也能接受制作仅含线条的重复图层这类方案，求帮忙。

解决方法 #

1. 调整遮罩形状（最简单的静态方案）

问题出在遮罩只覆盖了头部的填充区域，没有包含头部的描边宽度。头部的stroke-width是4，所以遮罩的椭圆需要把rx和ry各增加2（描边宽度的一半），这样遮罩会完整覆盖头部的描边区域，脸部描边在衔接处就不会被截断：

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">

  <defs>
    <mask id="maskFaceStroke">
      <rect width="100%" height="100%" fill="white" />
      <!-- 放大椭圆，覆盖头部描边 -->
      <ellipse cx="150" cy="100" rx="72" ry="92" fill="black" />
    </mask>
  </defs>

  <ellipse cx="150" cy="100" rx="70" ry="90" fill="#cce5ff" stroke="blue" stroke-width="4" />
  <ellipse cx="190" cy="110" rx="40" ry="60" fill="#ffe5e5" />
  <ellipse cx="190" cy="110" rx="40" ry="60" fill="none" stroke="red" stroke-width="4" mask="url(#maskFaceStroke)" />
</svg>

2. 使用JS动态裁剪（适合动态场景）

如果需要动态调整图形，可以用SVG库（比如SVG.js）来实现路径裁剪，自动计算非重叠区域：

// 引入SVG.js后使用
const svg = SVG().addTo('body').size(400, 200);

// 绘制头部
const head = svg.ellipse(140, 180)
  .move(80, 10)
  .fill('#cce5ff')
  .stroke({ width: 4, color: 'blue' });

// 绘制脸部填充
const face = svg.ellipse(80, 120)
  .move(150, 50)
  .fill('#ffe5e5');

// 绘制脸部描边并裁剪
const faceStroke = svg.ellipse(80, 120)
  .move(150, 50)
  .fill('none')
  .stroke({ width: 4, color: 'red' });

// 裁剪脸部描边，只保留不与头部重叠的部分
faceStroke.clipWith(svg.rect(400, 200).fill('white').subtract(head));

3. 手动绘制分段描边（适合静态固定场景）

如果图形位置固定，可以手动计算两个椭圆的交点，只绘制脸部描边的非重叠部分。比如用path元素直接绘制下半段椭圆：

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="150" cy="100" rx="70" ry="90" fill="#cce5ff" stroke="blue" stroke-width="4" />
  <ellipse cx="190" cy="110" rx="40" ry="60" fill="#ffe5e5" />
  <!-- 手动绘制脸部非重叠区域的描边 -->
  <path d="M 190,170 A 40,60 0 0,1 230,110 A 40,60 0 0,1 190,50 A 40,60 0 0,1 150,110 A 40,60 0 0,1 190,170" fill="none" stroke="red" stroke-width="4" />
</svg>

（注：路径中的坐标需要根据实际交点调整，可通过SVG工具计算精准坐标）

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