如何实现SVG椭圆内部描边？精准计算小椭圆参数的方法

一、小椭圆尺寸偏大的原因 #

你当前用rx = 原rx - 半描宽、ry = 原ry - 半描宽的方式计算小椭圆，会导致斜向位置的描边外沿超出原椭圆，视觉上显得整体偏大。核心原因：

• SVG椭圆的描边宽度是沿椭圆法线方向的绝对长度，不是沿x/y轴的偏移量。
• 长轴、短轴端点的法线方向与轴方向一致，这些位置的描边外沿刚好和原椭圆重合；但斜向位置的法线方向与x/y轴有夹角，此时小椭圆的描边外沿到中心的距离会大于原椭圆的径向距离，导致超出边界。

二、最优实现方案 #

方案1：使用Mask实现精准内部描边（性能优于Clip-path） #

Mask的渲染性能通常比复杂Clip-path更好，适合大多数场景。具体实现：

<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
  <!-- 原椭圆 -->
  <ellipse id="myEllipse" cx="150" cy="100" rx="100" ry="50" fill="green" />
  <!-- 定义遮罩：只保留原椭圆内部区域 -->
  <mask id="innerStrokeMask">
    <rect width="100%" height="100%" fill="black" />
    <ellipse cx="150" cy="100" rx="100" ry="50" fill="white" />
  </mask>
  <!-- 带描边的椭圆，应用遮罩后只显示内部描边 -->
  <ellipse fill="none" cx="150" cy="100" rx="100" ry="50" stroke="red" stroke-opacity="0.5" stroke-width="40" mask="url(#innerStrokeMask)" />
</svg>

原理：遮罩会隐藏椭圆描边超出原椭圆的外部部分，剩下的就是完全在内部的描边，视觉上精准贴合原椭圆边界。

方案2：近似椭圆缩放（无额外元素，适合简单场景） #

如果无法使用Mask，可以通过统一缩放椭圆+调整描边宽度来近似实现，减少斜向位置的偏移：

1. 以最长轴为基准计算缩放比例，保证最长轴端点的描边贴合原椭圆
2. 缩放椭圆的rx/ry，并反向放大描边宽度（抵消缩放对描边的压缩影响）

var ellipseElement = document.getElementById("myEllipse");
var strokeElement = document.getElementById("myStroke");
var initialRx = parseFloat(ellipseElement.getAttribute("rx"));
var initialRy = parseFloat(ellipseElement.getAttribute("ry"));
var strokeWidth = 40;
var halfStroke = strokeWidth / 2;

// 以最长轴为基准计算缩放比例
var maxAxis = Math.max(initialRx, initialRy);
var scale = (maxAxis - halfStroke) / maxAxis;

// 缩放后的椭圆参数
var scaledRx = initialRx * scale;
var scaledRy = initialRy * scale;
// 反向放大描边宽度，抵消缩放影响
var scaledStrokeWidth = strokeWidth / scale;

strokeElement.setAttribute("rx", scaledRx);
strokeElement.setAttribute("ry", scaledRy);
strokeElement.setAttribute("stroke-width", scaledStrokeWidth);

这个方法的描边在最长轴端点完全贴合原椭圆，短轴端点会有轻微缩进，但视觉上比直接减半描宽的效果更自然。

方案3：SVG路径偏移（精准但复杂度高） #

如果需要绝对精准的内部描边，可以将椭圆转换为<path>元素，然后通过JavaScript计算向内偏移后的路径点。但这种方法需要处理椭圆的参数方程，实现复杂度较高，仅适合对精度要求极高的场景。

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