有没有一种方法可以确保描边宽度为 40px 的 SVG 椭圆与另一个没有描边的椭圆大小相同？

Question

我想为 SVG 椭圆自定义笔划，将笔划放置在椭圆内。如果我设置笔划属性，我会将笔划分开，一半在椭圆内部，一半在椭圆外部。为了实现我的目标，我尝试在真实椭圆内放置一个较小的椭圆，为较小的椭圆设置描边，并将其填充设置为无。

但是，我注意到较小椭圆的总尺寸比真实椭圆略大。我怀疑用于计算较小椭圆的 rx 和 ry 的公式可能不正确。我一直在使真实椭圆的 rx 和 ry 减去笔划宽度的一半。

我想知道是否有更精确的公式来计算较小椭圆的rx和ry，或者是否有另一种方法可以在真实椭圆内绘制我的笔画。

编辑：使用clip-path可以隐藏额外的区域，但它可能会导致我的项目出现性能问题，所以我想知道是否有“更好”的方法。我也想了解为什么会有一些额外的区域。

感谢您的帮助！这是我的代码笔：https://codepen.io/cactusxx/pen/GReKMRJ

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 halfStrokeWidth = strokeWidth / 2.0;
var strokeRx = initialRx - halfStrokeWidth;
var strokeRy = initialRy - halfStrokeWidth;
console.log(strokeRx, strokeRy);
strokeElement.setAttribute("rx", strokeRx);
strokeElement.setAttribute("ry", strokeRy);
strokeElement.setAttribute("stroke-width", strokeWidth);

svg {
  border: 1px solid blue;
}

<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" />
  <ellipse id="myStroke" fill="none" cx="150" cy="100" stroke="red" stroke-opacity=0.5 />
</svg>

Answer 1

你成为几何规则的受害者：如果你在距椭圆轮廓固定距离处绘制一条路径，那么它就不是椭圆。如果将路径绘制在内部，则相对容易看出，从而导致尺寸较小，但对于外部路径也同样适用。几何证明这里不再解释。如果您有兴趣，您应该在 math.stackexchange 询问。

<svg viewBox="0 0 300 200">
  <ellipse cx="150" cy="100" rx="80" ry="30" fill="none" stroke="darkgreen" stroke-width="40" />
  <ellipse cx="150" cy="100" rx="80" ry="30" fill="none" stroke="red" />
  <ellipse cx="150" cy="100" rx="60" ry="10" fill="none" stroke="red" />
  <ellipse cx="150" cy="100" rx="100" ry="50" fill="none" stroke="red" />
</svg>

如果将两个轴尺寸不同的椭圆组合在一起，您将无法绘制出您想要的效果。相反，最好的方法是通过两次使用相同的定义来剪掉位于几何路径之外的笔画部分：

• 在

  <clipPath>

的定义中定义椭圆的几何形状
• 在

  <use>

  元素中引用椭圆并根据您的喜好设置填充和描边
• 使用

  <use>

  表示属性或 CSS 属性剪辑

  clip-path

  元素。

<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="clip">
    <ellipse id="myEllipse" cx="150" cy="100" rx="100" ry="50" />
  </clipPath>
  <use href="#myEllipse" fill="green" stroke="red" stroke-width="80" clip-path="url(#clip)" />
</svg>