SVG 整形 - 弯曲边缘

Question

到目前为止，我的 SVG 按钮具有这种形状，但现在我收到了重新设计它的请求。我需要有弯曲的边缘而不是我实现的锋利边缘，而且它也需要更长。对于我已经制作的那个，我使用了一些弧线和线条。到目前为止，我已经提供了设计图像以供参考，以及我为之前版本的按钮提供的代码。如何改进我的形状，使其看起来像新的设计图像？他们希望按钮与内部绿色部分相匹配，外部粗边框就在那里，所以形状更容易看到。

HTML

<svg viewbox="0 0 100 20" class="bottom-nav-circle-button-2" width="100" height="100">
  <path d="M 100 0 A 100 50 0 0 0 29.2 29.2 L 57.58 57.58 A 60 60 0 0 1 100 40 Z"></path>
</svg>

示例图片：

Answer 1

对于圆角请添加stroke-linejoin="round" 要使其更大，请参阅我对您其他问题的回答：How to make a “bent rectangle” in SVG? 即：您将不得不增加该段的角度。

<svg viewbox="0 -50 200 200" class="bottom-nav-circle-button-2" width="200" height="200">
  <path stroke="grey" stroke-width="10" stroke-linejoin="round" d="M 100 0 A 100 50 0 0 0 29.2 29.2 L 57.58 57.58 A 60 60 0 0 1 100 40 Z"></path>
</svg>

更新

OP 评论说他/她需要圆角的形状和笔画宽度只有 1 像素。我正在更新我的答案。现在形状的角成为二次贝塞尔曲线的控制点。偏移角度为a，垂直偏移为o。我需要这些偏移量来定义贝塞尔曲线的起点和终点。

在 cmets 中，您可能会找到原始形状的 d 属性和斜面形状。

为了获得不同的圆角效果，您可以尝试更改角度和偏移的值。

const rad = Math.PI / 180;

let cx = 50, cy = 100, R = 50, r = 35, A = 40 , a = 5, o=4;
// o for offset
testG.setAttributeNS(null, "transform", `rotate(${-90 -(A / 2) - a} ${cx} ${cy})`)


// control points for the quadratic Bézier
let px1 = cx + R * Math.cos(0);
let py1 = cy + R * Math.sin(0);
let px2 = cx + R * Math.cos((2*a + A)*rad);
let py2 = cy + R * Math.sin((2*a + A)*rad);
let px3 = cx + r * Math.cos((2*a + A)*rad);
let py3 = cy + r * Math.sin((2*a + A)*rad);
let px4 = cx + r * Math.cos(0);
let py4 = cy + r * Math.sin(0);

// points used to draw the shape
let x11 = cx + (R-o) * Math.cos(0);
let y11 = cy + (R-o) * Math.sin(0);

let x1 = cx + R * Math.cos(a*rad);
let y1 = cy + R * Math.sin(a*rad);

let x2 = cx + R * Math.cos((a + A)*rad);
let y2 = cy + R * Math.sin((a + A)*rad);

let x21 = cx + (R-o) * Math.cos((2*a + A)*rad);
let y21 = cy + (R-o) * Math.sin((2*a + A)*rad);

let x31 = cx + (r+o) * Math.cos((2*a + A)*rad);
let y31 = cy + (r+o) * Math.sin((2*a + A)*rad);

let x3 = cx + r * Math.cos((a + A)*rad);
let y3 = cy + r * Math.sin((a + A)*rad);

let x4 = cx + r * Math.cos(a*rad);
let y4 = cy + r * Math.sin(a*rad);

let x41 = cx + (r+o) * Math.cos(0);
let y41 = cy + (r+o) * Math.sin(0);

/*
No rounded corners
let d = `M${x1},${y1} A${R},${R},0 0,1 ${x2},${y2}
         L${x3},${y3} A${r},${r},0 0,0 ${x4},${y4}
         L${x1},${y1}Z`;*/

/*
Beveled corners
let d = `M${x1},${y1} 
         A${R},${R},0 0,1 ${x2},${y2}
         L${x21},${y21} 
         L${x31},${y31}
         L${x3},${y3}
         A${r},${r},0 0,0 ${x4},${y4}
         L${x41},${y41}
         L${x11},${y11}
         L${x1},${y1}Z`;*/

// Rounded corners with quadratic Bézier curves
    d = `M${x1},${y1} 
         A${R},${R},0 0,1 ${x2},${y2}
         Q${px2},${py2} ${x21},${y21} 
         L${x31},${y31}
         Q${px3},${py3} ${x3},${y3}
         A${r},${r},0 0,0 ${x4},${y4}
         Q${px4},${py4} ${x41},${y41}
         L${x11},${y11}
         Q${px1},${py1} ${x1},${y1}Z`;

test.setAttributeNS(null,"d",d);

svg{border:1px solid; max-width:90vh; }

path{stroke:black; fill:none;}

<svg viewBox="0 40 100 40">
  <g id = "testG" >
    <path id="test"/>
  </g>
</svg>

第二次更新

这是生成的 SVG：

<svg viewBox="0 40 100 40">
  <g id="testG" transform="rotate(-115 50 100)">
    <path id="test" stroke="black" fill="none" d="M99.80973490458729,104.35778713738291 
         A50,50,0 0,1 85.35533905932738,135.35533905932738
         Q82.13938048432698,138.3022221559489 79.5682300455808,135.23804438347298 
         L75.06871677777504,129.87573328164015
         Q72.49756633902888,126.81155550916424 74.74873734152916,124.74873734152916
         A35,35,0 0,0 84.86681443321109,103.05045099616804
         Q85,100 89,100
         L96,100
         Q100,100 99.80973490458729,104.35778713738291Z"></path>
  </g>
</svg>