SVG的Path(路径)


路径是SVG中一个非常重要的标签,用来描述一组线条,曲线和弧线。 

在之前的教程中,我们学习了line, polyline, polygon, rect等等。路径可以被用来描述这些图元如直线,折线,多边形圆和矩形的元素。 语法是比这些图元更复杂一点。 路径标签中有一个非常重要的属性'D'。 'D'属性是一个字符串,它描述了要创建的路径位置和形状。 'D'属性包含多个连续的指令, 如Move(移动),画线,画曲线,并画圆弧和曲线等等。 每个指令都是一个字母,后面跟着参数。 首先,我给一个简单的例子来解释'D'属性。

 

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg viewBox = "0 0 1100 400" version = "1.1">
    <path id = "s3" d = "M 60 0 L 120 0 L 180 60 L 180 120 L 120 180 L 60 180 L 0 120 L 0 60" fill = "green" stroke = "black" stroke-width = "3"/>
</svg>

上面的SVG文件将显示以下的图形。

 

 

SVG中的命令列表

这组命令的参数代表的是绝对坐标。假设当前画笔所在的位置为(x0,y0),则下面的绝对坐标指令代表的含义如下所示:

指令

参数

说明

M

x y

将画笔移动到点(x,y)

L

x y

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

H

画笔从当前的点绘制水平线段到点(x,y0)

V

画笔从当前的点绘制竖直线段到点(x0,y)

A

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

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

C

x1 y1, x2 y2, x y

画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y)

S

x2 y2, x y

特殊版本的三次贝塞尔曲线(省略第一个控制点)

Q

x1 y1, x y 

绘制二次贝塞尔曲线到点(x,y)

T

x y

特殊版本的二次贝塞尔曲线(省略控制点)

Z

无参数

绘制闭合图形,如果d属性不指定Z命令,则绘制线段,而不是封闭图形。

SVG路径中的M指令(移动到)

MOVETO命令是由单一的字母m”“M”。 大写的“M”是绝对坐标(当前坐标系)和小写相对坐标(相对当前的点)。 例如, M 100, 100, 就是移动到绝对坐标(100, 100m 100, 100, 则是在当前点的基础之上移动100,100,  如果先移动M 100, 100, 那么m 100, 100就等价于M100+100, 100+100,即是M 200, 200。 大写/小写的区别,也适用于所有其他的绘图命令的路径元素。

注意,'M'处理时,只是移动了画笔, 没有画任何东西。 它也可以在后面给出上同时绘制不连续线。

SVG路径中的L指令(画直线)

绘制直线的指令是“L”从当前点划线到给定点。  “L”之后的参数是一个点坐标,如“L 200 400”。 如果画水平线或垂直线,可以使用“H”“V”指令,后面的参数是x(H指令)y坐标V指令)

 

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg viewBox = "0 0 1100 400" version = "1.1">
    <!-- A triangle with absolute coordinates -->
    <path d = "M 200 50 L 300 150 L 200 150 L 200 50" stroke = "red" stroke-width = "3" fill = "none"/>
    <!-- A triangle with relative coordinates -->
    <path d = "M 500 50 l 100 100 l -100 0 l 0 -100" stroke = "green" stroke-width = "3" fill = "none"/>
    <!-- Practical use of relative moves -->
    <path d = "M 700 50 l 100 100 m 0 -100 l 100 100 m 0 -100 l 100 100" stroke = "blue" stroke-width = "3"/>
</svg>

 

     在SVG中,可以使用path元素定义路径.
<path  d ="M5,5 C5,45 45,45 45,5" style="stroke:blue;stroke-width=5" />
path元素的d属性代表数据声明标签,他的值就是路径上的关键点的信息集合。在d属性值中,M代表Moveto(移动到)M55表示先将起点移动到(5,5)处,代表Curve(贝赛尔曲线控制),C5,45 45,45 45,5中的点(45,5)表示第2个点的位置,中间的两点(5,45),(45,45)分别代表前一个点(5,5)和后一个点(45,5)之间的曲柄点的位置。

上一篇 下一篇

评论



分享