SVG路径中的A指令(画弧线)


绘制圆弧指令:

A

rx ry x-axis-rotation large-arc-flag sweep-flag x y

画笔从当前的点绘制一段圆弧到点(x,y)

 

SVG路径中的A指令有7个参数,分别控制曲线的的各个属性。下面解释一下参数的含义:rx, 弧的半长轴长度

ry 弧的半短轴长度
x-axis-rotation 是此段弧所在的x轴与水平方向的夹角,即x轴的逆时针旋转角度,负数代表顺时针转动的角度。
large-arc-flag 表示大角度弧线,代表小角度弧线。
sweep-flag 1代表从起点到终点弧线绕中心顺时针方向,代表逆时针方向。
x,y 是弧终端坐标。

x-axis-rotation代表旋转的角度,体会下面例子中圆弧的不同:

 

<svg width="320px" height="320px">
  <path d="M10 315
           L 110 215
           A 30 50 0 0 1 162.55 162.45
           L 172.55 152.45
           A 30 50 -45 0 1 215.1 109.9
           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg>

 

上面的HTML画出下面的图形:

 

 

从图中可以看到椭圆旋转参数的不同导致绘制的圆弧方向不同,当然这个参数对正圆来说没有影响。

large-arc-flagsweep-flag控制了圆弧的大小和走向,体会下面例子中圆弧的不同:

<svg width="325px" height="325px">
  <path d="M80 80
           A 45 45, 0, 0, 0, 125 125
           L 125 80 Z" fill="green"/>
  <path d="M230 80
           A 45 45, 0, 1, 0, 275 125
           L 275 80 Z" fill="red"/>
  <path d="M80 230
           A 45 45, 0, 0, 1, 125 275
           L 125 230 Z" fill="purple"/>
  <path d="M230 230
           A 45 45, 0, 1, 1, 275 275
           L 275 230 Z" fill="blue"/>
</svg>

 

这个HTML绘制了下面的几幅图:

 

 

 

上一篇 下一篇

评论



分享