使用SVG/JavaScript绘制两侧为圆弧的矩形，右侧圆弧无法外凸求助

问题原因 #

你当前右侧圆弧呈现内凹效果，核心是SVG path 椭圆弧指令（a）的sweep-flag参数设置错误导致的。你之前尝试调整rx、ry参数没有效果，是因为这两个参数仅控制圆弧的曲率半径，不会改变弧的绘制方向，因此无法调整凹凸朝向。

SVG椭圆弧指令的完整语法为：a rx ry x轴旋转角度 大弧标志 扫描标志 终点x 终点y，其中两个标志位的作用为：

• 大弧标志：取值0/1，0表示选择短弧绘制，1表示选择长弧绘制
• 扫描标志：取值0/1，0表示逆时针方向绘制弧，1表示顺时针方向绘制弧，该参数直接决定弧的凹凸朝向

解决方案 #

将代码中第一个圆弧指令的扫描标志从0改为1即可实现右侧外凸的效果，修改后的完整代码如下：

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

内容的提问来源于stack exchange，提问作者AndiAna