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点钟位置没有第二条线来封闭从内弧到外弧的间隙。这是由Zclose shape 命令隐式完成的。所以我们必须在最后添加一个额外的弧，就在Z. 它是一个半径与之前相同的圆弧，它在形状的起点（即M 80 10）结束。

A 8.75 8.75 0 1 1 80 10

我现在已经为你手动完成了。这对我来说很容易，因为我熟悉 SVG 路径的工作方式。如果您必须为任意路径执行此操作，那么这将不会像事实那样简单。