SVG画圆弧

先上代码：

1
2
3
<svg xmlns="http://www.w3.org/2000/svg" id="svg_draw" width="500" height="500" baseProfile="full" xmlns:NS1="" NS1:xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1">
    <path xmlns="http://www.w3.org/2000/svg" fill="#110099" d="M 150 150 L 300 150 A 150 150 0 0 0 280 75 Z" />
</svg>

重点在d属性的A这部分内容：

语法：d=”A rx ry x-axis-rotation large-arc-flag sweep-flag x y”

A 命令绘制椭圆弧。

参数含义：

rx,ry：椭圆的长半轴、短半轴；

x-axis-rotation：该段弧 所在椭圆的x轴与水平方向的夹角；

large-arc-flag：值可为0或1,0为小弧度角，1为大弧度角；

sweep-flag：绘制方向，0为逆时针，1为顺时针；

x,y椭圆弧终点坐标。

再来个计算右上方圆弧终点D(xd, yd)的图，对照着上面的数值进行查看，会更容易理解一些：

svg