SVG(Scalable Vector Graphics 可缩放矢量图形)

描述图像有两种：栅格图(raster graphics)和矢量图(vector graphics)。

在栅格图中，图像被表示为图片元素或像素的长方形数组，每个像素用RGB颜色vi表示。 这一系列图像也称为位图(bitmap)，通常以某种压缩格式存储。

在矢量图中，图像被描述为一系列的几何形状。

想象一下绘图过程，栅格图就是在画布上描点，而矢量图则是在画布上绘制曲线。

svg元素中，有关画布和坐标的属性说明

视口

画布大小，通过svg元素的属性 width 和 height 来设定

viewBox属性

该属性可实现图像的缩放

其值为坐标的起点和终点 x1 y1 x2 y2，例如：viewBox="0 0 100 100"

preserveAspectRatio属性

维持外形比例，指定画布大小与坐标范围(图像)之间的对应关系。

默认值为 "xMidYMid meet" 含义为居中、按比例缩小图像

值的含义：xMin最小值对齐 xMid中值对齐 xMax最大值对齐

meet按比例缩小图像 slice裁剪图像 none忽视比例地拉伸图像

图形的组合

g 元素可以包裹其他图形，实现这些图形的组合，也可以把 g 元素看作图层。

symbol 元素提供了另一种组合元素的方式，具有viewBox、preserveAspectRatio属性。 它还有一个特点：不会显示自己，必通过 use 元素引用后才能显示。

图形的复用

def 元素内定义的所有图形，都不会直接显示，它们如同‘模板’，是专门的复用对象。 在 use 元素引用它时，可以指定样式。

use 元素的作用是引用图形元素，使用方法： 指定 use 元素的属性 xlink:href="path/name.svg#element_id"； 指定引用图形的坐标偏移值 x y； 指定样式 style。 image 元素可以包含一个完整的svg文件或栅格文件，具有xlink:href x y width height属性。

坐标变换

translate(x-offset, y-offset) 对图形的坐标进行偏移 scale(value) 或 scale(x-value, y-value) 对坐标值进行比例缩放 中心缩放(先平移，再缩放): translate(-centerX*(factor-1), -centerY*(factor-1)) scale(factor) rotate(angle, centerX, centerY) 基于某一点而旋转 skewX(angle) 和 skewY(angle) 相对于X轴 Y轴而倾斜 (理解坐标变换和滤镜，需用到矩阵代数知识)

以上两图中，唯一的区别在于transform属性中的 translate 和 scale 的次序

路径path d="M 0 0 L 5 5 L 10 15 20 20 ..."

起笔命令：M 或 m (moveto的第一个字母) 走笔命令：L 或 l (lineto的第一个字母) 该命令可以省略 闭路命令：Z 或 z (字母表的最后一个字母) 水平线命令：H 或 h (horizontal的第一个字母) 垂直线命令：V 或 v (vertical的第一个字母) 椭圆弧命令：A 或 a 后面跟随： x-radius y-radius x-axis-rotation large-arc-flag(长于pi为1) sweep-flag(正角为1) 终点x,y 画北半球：path d="M (cx -rx) cy A rx ry 0 1 1 (cx+rx) cy" 二次贝塞尔曲线：控制点与端点组成的线为曲线的切线，并且，两切线中点而形成的线也与曲线相切。 命令Q 控制点, 终点 (控制点如同拉弦的手，终点是弦的另一端；) 命令T 接下来的终点 (控制点为前一个点的镜像点) marker 元素可以作为标记，在样式中引入，比如 marker-start[mid|end]: url(#marker-id) 它有这些属性 markerWidth markerHeight refX refY orient="auto"

图案和渐变

patternUnits linearGradient

文本 text

text 元素中，可以嵌入 tspan 元素，以实现样式和位置的控制。

裁剪和蒙版

使用 clipPath 元素来创建裁剪区域。 用 mask 元素来创建蒙版，蒙版与化装舞会上戴的面具正好相反。 如果蒙版是不透明的，被蒙的像素就是不透明的； 如果蒙版是半透明的，被蒙的像素就是半透明的； 蒙版的透明部分会使被蒙对象的相应部分不可见。

滤镜

投影 反射

动画

同步动画 重复

交互

SMIL

同步多媒体集成语言（SMIL，Synchronized Multimedia Integration Language）能让网站设计人容易的为网络展示和交互作用定义及同步多媒体元素（视频、声音、图像）。

D3.v3.js 数据驱动文档对象脚本库

D3 即 Data-Driven Document。

绘图函数参数命名规约： _width, _height: svg画布的宽度和高度 _margins: svg画布在四周的留白 _x, _y: 数据转为画布坐标的尺度变换函数 _data: 数据 _colors: 颜色系 _svg: svg元素 _bodyG: 图形绘制区，画布区域 = 留白区 + _bodyG _line: 点集转图像函数，把点集数组转换成path元素的d属性值

d3.scale 尺度变换系列 (用_x, _y 表示)

d3.scale.linear() 输入和输出值呈线性比例 d3.scale.pow().exponent(2) 输出值=输入值^2； 若指定了domain(定义域)和range(值域)，那么输出值=系数a*输入值^2+常数b。 d3.scale.log() 输出值=log(输入值)； 若指定了domain(定义域)和range(值域)，那么输出值=系数a*log(输入值)+常数b。 注：指定了定义域和值域，就给出了两组数，正好有两个二元一次方程，可解出 a 和 b 的值。 在axis()函数中，原始数据的最值为定义域，画布上的起止坐标为值域。

d3.svg.axis() 输入一个g元素，在该元素上按设定的要求绘制一条轴

例如： d3.svg.axis() .scale(d3.scale.linear().domain([0,10]).range([0,200])) .orient("bottom") .ticks(5) (d3.select("#svg-01 g.axis"));

d3.svg.line() 输入数组，返回 d 属性值

输入代表点集的数组，定制点(x,y)的变换函数，返回d属性值。 d3.svg.line().interpolate(mode).x().y()(points-data); 插值模式mode的常用值： linear 分段线性片段，如折线(直连，默认值) basis B样条曲线，在两端控制点的重复 cardinal 基本样条曲线，在末端控制点的重复 monotone 三次插值，可以保留y的单调性

绘图实例