SVG路径边界半径

Question

我可以在设置路径标记的边界半径时使用一些帮助。这是当前代码，这是想要的结果

<svg xmlns="http://www.w3.org/2000/svg">
    <path d="M 80 10 A 70 70 0 1 1 23.368810393753677 38.855032339526886 L 37.52660779531526 49.14127425464517 A 52.5 52.5 0 1 0 80 27.5 Z"></path>
</svg>

Answer 1

如果您的路径只是一条从12点到10点的开放曲线，那将很容易。您可以只添加stroke-linecap="round"。

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M 80 18.75 A 61.25 61.25 0 1 1 30.45 44.00"
        fill="none" stroke="black" stroke-width="17.5" stroke-linecap="round"></path>
</svg>

不幸的是，您的形状并非如此。它是一个封闭的形状，从12点到10点沿顺时针方向延伸，在内部半径上画一条线，然后逆时针圆弧再次回到12点钟。添加圆角端有些棘手。

您需要在L现在的位置添加另一个弧。然后在最后一个Z之前插入另一个。

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M 80 10
           A 70 70 0 1 1 23.368810393753677 38.855032339526886
           A 8.75 8.75 0 1 1 37.52660779531526 49.14127425464517
           A 52.5 52.5 0 1 0 80 27.5
           A 8.75 8.75 0 1 1 80 10
           Z"></path>
</svg>

行

L 37.52660779531526 49.14127425464517

被圆弧取代

A 8.75 8.75 0 1 1 37.52660779531526 49.14127425464517

8.75是圆弧半径。那是形状“厚度”的一半。就是外弧和内弧之间17.5距离的一半。

在12点钟处没有第二条线可以缩小从内弧到外弧的间隙。这是通过Z close shape命令隐式完成的。因此，我们必须在Z的最后添加一个额外的弧。这是一个半径与之前相同的弧，它在形状的起点（即M 80 10）处结束。

A 8.75 8.75 0 1 1 80 10

我现在为您手动完成了此操作。对我而言，这很容易，因为我熟悉SVG路径的工作原理。如果您必须对任意路径进行操作，那将不会像原来那样简单。