SVG画半圆角+直线

代码

<svg  version="1.1" width="500" height="500">
    <path d="M 0 50 0 100" stroke="black"  fill="none" />
     <path d="M 50 50 A 5 5 0 0 1 45 55 " stroke="black"  fill="none" />
    <path d="M 150 50 150 95 A 5 5 0 0 1 145 100 " stroke="black"  fill="none" />
    <path d="M 250 50 250 95 A 5 5 0 0 1 245 100 L225 100" stroke="black"  fill="none" />
    <path d="M 350 50 350 95 A 5 5 0 0 1 345 100 L325 100 A 5 5 0 0 0 320 105" stroke="black"  fill="none" />
    <path d="M 450 50 450 95 A 5 5 0 0 1 445 100 L425 100 A 5 5 0 0 0 420 105 L420 150" stroke="black"  fill="none" />
</svg>

效果图

image.png

参数说明

M

M代表开始移动
M0 0指从坐标0，0开始移动

L

L代表直线
M0 0 L 100 100指画一条坐标0，0到坐标100，100的直线

A

A代表弧形
参数有七个数值，代表不同的意思

1. rx（画出半圆中唯一一条弧线所需的半径）
2. ry（同上，rx不等于ry时为椭圆）
3. 顺时针角度（rx、ry相等时设置无效）
4. 1大弧0小弧（使用rx、ry所画出的圆中两点之间的一侧大弧弧度还是一侧小狐弧度），示例中参数使用的0
5. 1顺时针0逆时针（rx、ry所画的弧度是按照顺时针方向放置还是逆时针方向放置即圆弧在半圆两条线交叉角度中是外凸还是内凹）
6. 下边连线点即终点，X坐标
7. 下边连线点即终点，Y坐标
   A 5 5 0 0 1 45 55 指画一个坐标5，5到45，55 的弧形