SVG路径边界半径答案

【问题标题】：SVG path border radiusSVG路径边界半径
【发布时间】：2019-02-04 08:32:03
【问题描述】：

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

<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>

【问题讨论】：

标签： css svg path

【解决方案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 路径的工作原理。如果您必须为任意路径执行此操作，那么这将不会像这个结果那么简单。

【讨论】：