SVG主要的画图元素以及几个基本的几何图形介绍

本文主要介绍SVG画图中的两种主要画图元素：Path和Text，以及SVG的几个基本的几何形状，如线条，折线，多边形，椭圆，矩形，圆等等。本文主要采取理论+例子的方式来介绍，这种方式向来都是解释介绍的王道，同时也是学习的一种好方法。

 

 

第一，首先介绍Path

1、简介：

path元素定义了一种闭合或者非闭合的几何形状，一个path节点的定义可能包含几个小path，而这些path当中每个path都代表了一种几何形状，例如直线，曲线等等，定义在一个path节点当中的这些path片段基本上是互相独立的。

 

2、例子

（1）、定义一个path节点如 <path d="M 0 0 L 100 100">，这个path定义一条直线，如例子中所示，直线的路径主要由属性 d 决定，M有Move to的意思，L有代表直线的意思（straight Line），好了，写到这里，这个例子的意思也很明显了，那就是从起始坐标（0,0）向终点坐标（100,100）画一条直线。

 

（2）、例子 <path d="M 0 0 L 100 0 L50 100 Z">表示画一个三角形，Z 命令表示从终点坐标（50,100）向起始坐标（0,0）画一条闭合直线，从而此路径是一个闭合的路径，所以 Z 命令的作用主要是：闭合（曲线）。还有一个典型的例子是使用SVG画一个鸭子，勾画鸭子形状的线条是由很多短线条组成的：

 

 

<path d="M 0 112
L 20 124 L 40 129 L 60 126 L 80 120 L 100 111 L 120 104 L 140 101 L 164 106 L 170 103 L
173 80 L 178 60
L 185 39 L 200 30 L 220 30 L 240 40 L 260 61 L 280 69 L 290 68 L 288 77 L 272 85 L 250 85 L 230 85
L 215 88 L 211 95
L 215 110 L 228 120 L 241 130 L 251 149 L 252 164 L 242 181 L 221 189 L 200 191 L 180
193 L 160 192 L 140 190 L 120 190
L 100 188 L 80 182 L 61 179 L 42 171 L 30 159 L 13 140 Z"/>

 

 

 

画出的鸭子如下图所示，这里需要43个点，这显然不是最好的选择。

 

 

上图改成用曲线来画只需要25个点，这样不仅节省空间，而且会提高运行速度：

 

 

<path d="M 0 312
C 40 360 120 280 160 306 C 160 306 165 310 170 303
C 180 200 220 220 260 261 C 260 261 280 273 290 268
C 288 280 272 285 250 285 C 195 283 210 310 230 320
C 260 340 265 385 200 391 C 150 395 30 395 0 312 Z"/>

 

3、基本命令介绍

以上的例子当中主要是介绍了M命令和L命令。SVG画图的基本命令如下表所示（基本上是画直线的）：

 

 

（1） 画曲线的命令 C ，此命令有三个参数，（c1x c1y ，  c2x  c2y ，x y）。如从起始点（50,70）向点x，y（200,70）画一条曲线的path定义为<path d="M50,70 C50,20 200,20 200 70">，其中的 c1x c1y 控制了曲线的始点和水平线的角度，称为起始控制点，这个角度实际上是由M定义的起点坐标及 c1x c1y定义的坐标点所画成的直线和水平线间的角度来决定的（？），这条直线可以看成时曲线始点处的切线（？）。同样，曲线终点处的方向是由终点坐标（x，y）和c2x  c2y所画成的直线（曲线终点处的切线？）和水平线形成的角度来决定的（？）。c2x  c2y称为第二个控制点，如下图所示：

 

具体例子：

 

（2）命令Q，用于画二次贝塞曲线，（x，y  x1，y1），坐标点（x，y）为曲线的控制点，点（x1，y1）为曲线的结束点。如下图：

（3）命令T，（x，y）映射前面路径后的终点x，映射前面路径后的终点y。如下图：

（4）命令S，（x，y  x1，y1），第二控制点（x，y），结束点（x，y）。如下图：

（5）命令A，（rx  ry  x-axis-rotation  large-arc-flag  sweep-flag  x  y），用来画弧线的，一共七个参数，这七个参数代表的意思解释如下：

rx：弧的半长轴长度；

ry：弧的半短轴长度；

x-axis-rotation：此弧段所在的X轴与水平方向的夹角，即X轴的旋转角度；

large-arc-flag：此参数有两个值，分别为0和1。0代表小角度弧线，1代表大角度弧线；

 sweep-flag：此参数也有两个值，分别为0和1。1代表从起点到终点弧线绕中心顺时针方向，0代表逆时针方向；

x，y：弧线的终端坐标。

例子：

<path d="M 2 40 A 16 12 0 1 1 32 34">，画出来的弧线为  

记住，不要忘了M，它代表起点。

 

4、注意事项

（1）路径的坐标与坐标之间可以用空格分隔，也可以用逗号分隔，如 <path d="M 0 0 L 100 0 L50 100 Z M300,300 L400,300 L350,400 Z">，子路径M 0 0 L 100 0 L50 100 Z 的坐标之间是使用空格分隔的，而子路径M300,300 L400,300 L350,400 Z 的坐标之间是使用逗号分隔的。

（2）如果命令使用的是小写，这意味着此命令定义的坐标和前面的当前位置是相对的（relative to the previous current position）。例如：

 

 

每一个命令都有相对应的小写命令，这些小写命令相当于定义了相对于当前位置的坐标。

（3）当意思比较明显时，命令和坐标值之间可以不必用空格来间隔，如果下一个命令和前一个命令是一样的，命令字母可以忽略不写，如上面使用曲线画鸭子的命令。

（4）必须指出的是，大写命令Z和小写z命令的效果是一样的。

（5）在画图定义中，以点开始的数字如果意思比较明确，数字之间也可以不用空格来间隔，例如：

<path d="M0,0L.5.5.8.2Z">等价于<path d="M 0, 0 L 0.5, 0.5 L 0.8, 0.2 Z">。

 

 

第二，text元素介绍

 

text元素有比较多的样式属性，这里主要介绍三种形式的text。

 

1、例1，text以及tspan节点

 

 

 

<text x="220" y="20">   
<tspan x="220" dy="30">This is multi-line</tspan>
<tspan x="220" dy="30">text or text</tspan>
<tspan x="220" dy="30" style="fill:white;stroke:green">with different properties</tspan>
<tspan x="20" dy="30" rotate="10 20 30 40 0 50 60 70 0 80 90 0 100 110 120 140 150 160 170
180">
that can be produced</tspan>
<tspan x="220" dy="30">using the tspan element</tspan>
</text>

 

 

（1）<text>节点只有属性x和y，他们定义了文本的起始位置，实际上这个x，y坐标指的是文本中第一个字母（或文字）的左下角的位置坐标，而且文本是自左向右排列的。

（2）子节点<tspan>是用来调整文本的位置或改变文本的属性的，它同样有x，y属性，或者dx（它的值相对于x）属性或dy（它的值相对于y）属性，目前文本的位置可以根据dx和dy定义的相对值来递增，其中dx定义了x方向的位置递增，dy定义了y方向的位置递增

 

 

2、例2，tspan中的rotate属性

 

 

<tspan x="20" dy="30" rotate="10 20 30 40 0 50 60 70 0 80 90 0 100 110 120 140 150 160 170
180">
that can be produced</tspan>

 

 由<tspan>节点定义的文本可以通过rotate属性来改变该文本的样式，视觉效果主要是旋转。

 

3、例3，textPath节点

 

 

<path id="duck" d="M 0 312 C 40 360 120 280 160 306 C 160 306 165 310 170 303
C 180 200 220 220 260 261 C 260 261 280 273 290 268 C 288 280 272 285 250 285
C 195 283 210 310 230 320 C 260 340 265 385 200 391 C 150 395 30 395 0 312 Z"/>
<text style="font-size:10">
<textPath xlink:href="#duck">
We go up, then we go down, then up again around his head. Now we are upside down as we
go round his neck and along the bottom to the tail.
</textPath>
</text>

 path画了一只鸭子，textPath节点定义了它包含的文本的排列路径，即textPath中的文本是围绕着这只鸭子来排列的。请注意path节点中定义了id属性，textPath节点定义了xlink:href属性，id的属性值等于xlink:href的属性值，两者是这样联系起来的。

 

 

4、例4，text当中的其他样式介绍

 

 

<text>
<tspan x="30" dy="30" font-size="16">This </tspan>
<tspan x="330" dy="30" fill="red">is </tspan>
<tspan x="530" dy="30" font-weight="normal">a </tspan>
<tspan x="130" dy="30" font-family="Courier" font-size="28">single </tspan>
<tspan x="330" dy="30" fill="green">text </tspan>
<tspan x="30" dy="60" font-style="italic">string </tspan>
<tspan x="430" dy="30" font-size="18">that </tspan>
<tspan x="330" dy="30" font-size="20">has </tspan>
<tspan x="230" dy="30" font-size="24">been </tspan>
<tspan x="130" dy="30" font-size="28">distributed <</tspan>
<tspan dx="30" dy="30">across </tspan>
<tspan dx="130" dy="30">the </tspan>
<tspan dx="-230" dy="30">canvas</tspan>
</text>

 

以上的例子由SVG画出的图像如下所示。

 

 

 

 

 

第三，SVG的其他基本几何形状

 

从左到右依次为圆，矩形，直线，折线，多边形，椭圆形。

 

SVG绘画各种图形的命令和例子如下表所示：

 

 

第四，结尾

还有很多SVG的基础没有介绍，比如<g>标签，各种基本函数等等。

SVG的功能很强大，以上的一点基础知识介绍可以作为SVG的入门学习，有误的地方希望你能不吝指正，谢谢！

另外，我在这里也上传了一本SVG的初级教程，不过是英文版的，还不错，希望对你有所帮助。