在 javascript/svg 中绘制一个有两条边的方框作为圆弧

Question

我正在尝试制作这样的形状

我设法做到了这一点

但我无法获得向外而不是向内的正确弧线。我无法在网上找到任何帮助如何做到这一点。我试过旋转和玩 rx，但没有运气。

这是它的 JSFiddle

<svg height="200" width="300">
  
  
      <g stroke="none" fill="blue">
        <path d="
        M 150 0
        a 1 1 0 0 0 0 100
        l -100 0
        a 1 1 0 0 0 0 -100
        l 100 0
        Z
        "/>
      </g>
 
</svg>

Answer 1

在第一个弧上，您只需将 sweep-flag 翻转为“顺时针”：
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve

<svg height="200" width="300">

    <g stroke="none" fill="blue">
        <path d="
        M 150 0
        a 1 1 0 0 1 0 100
        l -100 0
        a 1 1 0 0 0 0 -100
        l 100 0
        Z
        "/>
    </g>
 
</svg>

在 javascript/svg 中绘制一个有两条边的方框作为圆弧

Drawing a box with two sides as an Arc in javascript/svg

javascript

svg