css - 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 是圆弧半径。那是你形状“厚度”的一半。 IE。外弧和内弧之间 17.5 距离的一半。

没有第二条线在12点钟位置关闭从内弧到外弧的间隙。这是由 Z close shape 命令隐式完成的。所以我们必须在末尾添加一个额外的圆弧，就在 Z 之前。它是一个与之前半径相同的圆弧，在形状的起点结束(即 M 80 10)。

A 8.75 8.75 0 1 1 80 10

我现在已经为您手动完成了这项工作。这对我来说很容易，因为我熟悉 SVG 路径的工作原理。如果您必须对任意路径执行此操作，那么事情就不会像这个结果那么简单了。