首页 > 上网技巧 > 电脑小技巧 > 正文

SVG基本图形图表之路径线图path应用教程

时间:2014-07-21 09:06 作者:QQ地带 我要评论

<path> 是个很特别的标籤,可以搭配不同的指令画出各种路径线图。
 
检视原始码 HTML
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M 50 150 C 50 0 250 0 250 150 H 500" style="fill:none;stroke:black;stroke-width:2;" />
</svg>
路径的部份要设定在 d 属性中!
 
 

 
path 的指令有:
指令 参数 指令说明
M x y 起始点的 x, y 座标(moveto)
L x y 从目前点的座标画直线到指定点的 x, y 座标(lineto)
H x 从目前点的座标画水平直线到指定的 x 轴座标(horizontal lineto)
V y 从目前点的座标画垂直线到指定的 y 轴座标(vertical lineto)
C x1 y1 x2 y2 x y 从目前点的座标画条贝兹曲线到指定点的 x, y 座标:其中 x1, y1 及 x2, y2 為控制点(curveto)
S x2 y2 x y 从目前点的座标画条反射的贝兹曲线到指定点的 x, y 座标:其中 x2, y2 為反射控制点(smooth curveto)
Q x1 y1 x y 从目前点的座标画条二次贝兹曲线到指定点的 x, y 座标:其中 x1, y1 為控制点(quadratic Bézier curve)
T x y 从目前点的座标画条反射二次贝兹曲线到指定点的 x, y 座标:以前一个座标為反射控制点(smooth quadratic Bézier curveto)
A rx ry x-axis-rotation large-arc-flag sweep-flag x y 从目前点的座标画个椭圆形到指定点的 x, y 座标:其中 rx, ry 為椭圆形的 x 轴及 y 轴的半径,x-axis-rotation 是弧线与 x 轴的旋转角度,large-arc-flag 则设定 1 最大角度的弧线或是 0 最小角度的弧线,sweep-flag 设定方向為 1 顺时针方向或 0 逆时针方向(elliptical Arc)
Z 关闭路径,将目前点的座标与第一个点的座标连接起来(closepath)
指令同时也区分大小写,大写表示座标是使用绝对座标,小写则是用相对座标。
 
加上各种指令后:
 
检视原始码 HTML
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M 50 150 Q 250 100 250 150 T 450 150" style="fill:none;stroke:red;stroke-width:5;" />
</svg>
 
指令跟座标间的空格是可以省略的,所以这样也是一样的效果:
 
检视原始码 HTML
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M50 150Q350 50 300 150T450 150" style="fill:none;stroke:red;stroke-width:5;" />
</svg>
笔者将 path 的属性整理成一个简单的表格:
 
path 属性
属性名称 属性说明
d 路径指令
transform 路径的变形效果,类似 css 中的 transform

标签: svg
顶一下
(1)
100%
踩一下
(0)
0%

Google提供的广告