SVG基础

SVG简介

SVG即可缩放矢量图形（Scalable Vector Graphics），是一种描述2D矢量图的格式，由W3C制定。SVG使用XML定义图形，因此可对SVG DOM每个元素进行定制。与HTML5的canvas绘图对比点此。SVG与其他的W3C标准，比如CSS、DOM和SMIL等能够协同工作。

使用<svg>标签在HTML中嵌入SVG图形：

<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <!-- elements... -->
</svg>

其中width和height说明了绘制区域的宽高，version是SVG版本，xmlns表示命名空间。所绘制的图形元素添加到<svg></svg>中即可。下面介绍SVG各种常用元素。

元素

首先说明SVG坐标定位，如下图：

SVG坐标系与大多数计算机图形标准一样，以页面的左上角为(0,0)坐标点，坐标以像素为单位，x轴正方向是向右，y轴正方向是向下。

1.矩形（reat）

参数：
* x：左上角的x坐标
* y：左上角的y坐标
* width：宽度
* height：高度
* rx：x方向圆角半径
* ry：y方向圆角半径
下例分别绘制了一个直角矩形和一个圆角矩形：

<rect x="10" y="10" width="200" height="100" stroke="black" fill="transparent" stroke-width="5" />
<rect x="220" y="10" width="200" height="100" rx="30" ry="30" stroke="black" fill="transparent" stroke-width="5" />

其中stroke fill等属性将在样式一节介绍。效果如下：

2.圆形（circle）与椭圆（ellipse）

圆形的参数：
* cx：圆心的x坐标
* cy：圆心的y坐标
* r：半径
椭圆的参数：
* cx：圆心的x坐标
* cy：圆心的y坐标
* rx：水平半径
* ry：垂直半径
下例分别绘制一个圆形和一个椭圆形：

<circle cx="60" cy="60" r="50" stroke="black" fill="transparent" stroke-width="5"/>
<ellipse cx="200" cy="60" rx="80" ry="50" stroke="black" fill="transparent" stroke-width="5"/>

效果如下：

3.线段（line）

参数：
* x1：起点x坐标
* y1：起点y坐标
* x2：终点x坐标
* y2：终点y坐标
例如：

<line x1="10" y1="10" x2="200" y2="100" stroke="black" fill="transparent" stroke-width="5" />

效果如下：

4.多边形（polygon）与折线（polyline）

多边形和折线都只有一个参数：
* points
points参数指定了一系列点的坐标，多边形的特殊之处在于它会吧终点和起点自动连接。

下例绘制了一个多边形和一条折线：

<polygon points="100,20 20,90 60,160 140,160 180,90" stroke="black" fill="transparent" stroke-width="5"/>
<polyline points="280,20 200,90 240,160 320,160 360,90" stroke="black" fill="transparent" stroke-width="5"/>

坐标值可由空格或者逗号分隔，上述写法更利于阅读。

5.路径（path）

路径的功能最灵活，应用也最广。语法为给出点坐标，并在坐标前标记功能类型字母。大写字母表示绝对坐标，小写字母表示相对坐标。path按照功能可以分为五大类：

（1）移动类

• M = moveto：将画笔移到指定坐标

（2）直线类

• L = lineto：画直线到指定坐标
• H = horizontal lineto：画水平直线到指定坐标
• V = vertical lineto：画垂直直线到指定坐标
  例如：

<path d="M10,10 L200,100
         M10,50 H200,40
         M100,100 V100,10"
         stroke="black" stroke-width="5"/>

（3）曲线类

• C = curveto：三次贝塞尔曲线，指定两个控制点和一个终点。经过两个控制点到达终点
• S = shorthand/smooth curveto：与前一条三次贝塞尔曲线相连。只需输入两个坐标：第二个控制点和终点，而第一个控制点是前一条贝塞尔曲线第二个控制点的对称点
• Q = quadratic Bezier curveto：二次贝塞尔曲线，指定一个控制点和一个终点
• T = shorthand/smooth quadratic Bezier curveto：与前一条二次贝塞尔曲线相连。只需指定终点
  例如：

<path d="M30,100 C100,20 190,20 270,100
         S400,180 450,100" 
         stroke="black" fill="transparent" stroke-width="5"/>

控制点的关系如下：

（4）弧线类

• A = elliptical arc：画椭圆曲线到指定坐标
  弧线由椭圆生成，具体参数如下：
  
  • rx：水平半径
  • ry：垂直半径
  • x-axis-rotation：椭圆x轴与水平轴顺时针方向夹角
  • large-arc-flag：有两种值，分别是：1 大角度弧线和0 小角度弧线
  • sweep-flag：有两种值，分别是：1 顺时针至终点和 0 逆时针至终点
  • x：终点x坐标
  • y：终点y坐标
    下面绘制一条弧线：

<path d="M100,200 a200,150 0 1,0 150,-150"
stroke="black" fill="transparent" stroke-width="5"/>

a是小写字母，即相对坐标。当前画笔位置为（100，200），指定水平半径为200，垂直半径为150，x轴与水平坐标夹角为0，采用大角度、逆时针方向走向终点。效果如下：

（5）闭合类

• Z = closepath：绘制一条连接终点和起点的线段来封闭图形
  将上例弧线参数最后添加Z即可闭合图形：

<path d="M100,200 a200,150 0 1,0 150,-150 Z"
stroke="black" fill="transparent" stroke-width="5"/>

效果如下：

6.文字（text）

参数：
* x：文字位置x坐标
* y：文字位置y坐标
* dx：相对于当前位置在水平方向平移的距离（正值向右，负值向左）
* dy：相对于当前位置在垂直方向平移的距离（正值向下，负值向上）
* textLenght：文字的显示长度（不足会拉长，超出会压缩）
* rotate：旋转角度（正值顺时针，负值逆时针）
例如：

<text x="10" y="10" dx="50" dy="50" rotate="180" textLength="180">
    JavaScript is not Java
</text>

可以用<tspan>标签对文字某部分单独定义样式，例如：

<text x="10" y="10" dx="50" dy="50" rotate="180" textLength="180">
    JavaScript is <tspan fill="red">not</tspan> Java
</text>

效果如下：

样式

前面代码中已经使用了fill、stroke、stroke-width等样式，下面列出出常用的样式属性：
* fill：填充颜色
* stroke：轮廓颜色
* stroke-width：轮廓宽度
* stroke-linecap：线头端点样式文档
更多属性参考MDN