如何让SVG线条在与ellipse相交处终止以显示外部marker？

方法1：纯SVG遮罩法（适合简单已知形状） #

如果是椭圆这类规则形状，不想写JS，可以用遮罩隐藏线条在椭圆内部的部分，同时单独放置标记避免被遮挡：

<svg>
  <defs>
    <marker
      id="arrow"
      viewBox="0 0 10 5"
      refX="0"
      refY="2.5"
      markerUnits="strokeWidth"
      markerWidth="5"
      markerHeight="2.5"
      orient="auto"
    >
      <path
        d="M 0 0 L 10 2.5 L 0 5 z"
        fill="context-stroke"
        stroke="context-stroke"
      />
    </marker>
    <!-- 定义遮罩：椭圆内部区域隐藏，外部显示 -->
    <mask id="ellipseMask">
      <rect width="100%" height="100%" fill="white"/>
      <ellipse cx="0" cy="0" rx="100" ry="40" fill="black"/>
    </mask>
  </defs>

  <g transform="translate(50%, 50%)">
    <!-- 线条应用遮罩，只显示椭圆外的部分 -->
    <line x1="-200" y1="0" x2="0" y2="0" mask="url(#ellipseMask)"/>
    <!-- 单独添加箭头标记，放在椭圆边缘 -->
    <path d="M -100 0" marker-end="url(#arrow)" stroke="none"/>
    <ellipse cx="0" cy="0" rx="100" ry="40" stroke="#000"/>
  </g>
</svg>

方法2：JS动态计算交点（适用于任意复杂路径） #

对于复杂路径，手动计算交点不现实，用SVG的getIntersectionList API可以自动获取线条与目标图形的交点，动态调整线条终点：

<svg>
  <defs>
    <marker
      id="arrow"
      viewBox="0 0 10 5"
      refX="10"
      refY="2.5"
      markerUnits="strokeWidth"
      markerWidth="5"
      markerHeight="2.5"
      orient="auto"
    >
      <path
        d="M 0 0 L 10 2.5 L 0 5 z"
        fill="context-stroke"
        stroke="context-stroke"
      />
    </marker>
  </defs>

  <g transform="translate(50%, 50%)">
    <line id="targetLine" x1="-200" y1="0" x2="0" y2="0" marker-end="url(#arrow)"/>
    <ellipse id="targetEllipse" cx="0" cy="0" rx="100" ry="40" stroke="#000"/>
  </g>

  <script>
    const line = document.getElementById('targetLine');
    const ellipse = document.getElementById('targetEllipse');
    const svg = document.querySelector('svg');
    
    // 把线条转为path对象以便计算交点
    const linePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    linePath.setAttribute('d', `M ${line.getAttribute('x1')} ${line.getAttribute('y1')} L ${line.getAttribute('x2')} ${line.getAttribute('y2')}`);
    
    // 获取线条与椭圆的所有交点
    const intersections = svg.getIntersectionList(linePath.getBBox(), ellipse);
    if (intersections.length > 0) {
      // 取离线条起点最近的交点作为新终点
      const closestPoint = intersections[0];
      line.setAttribute('x2', closestPoint.x);
      line.setAttribute('y2', closestPoint.y);
    }
  </script>
</svg>

这个方法无需手动计算坐标，不管目标是椭圆、多边形还是复杂路径，都能自动找到交点并调整线条长度，箭头标记会自然显示在图形外侧。

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