snowdream

在SVG中的图案（pattern），可以理解为通过重复填充某一图形得到的图像。因此被重复填充的那个图形可视为图案的填充单元（tile，直译就是瓷砖），最终得到的图案就取决于如何在整个图案区域中重复这一填充单元以及在分配到的单元格中如何填充这个图形。

transform是css3新增的功能，可以用来改变元素的形状和位置，分为2D和3D两种，实际上2D变换可以看做是3D变换的一种特殊形式。

原理

可以联想到计算机图形中的摄像机与物体的空间关系，以及透视投影原理，就能理解3D transform的基本原理了。

需求

有时候需要对某一元素进行拖拽，并要求在拖拽过程中跟随鼠标进行移动；比如下面的效果：

基本概念

SVG（Scalable Vector Graphics），即可缩放矢量图形，用于描述二维矢量图形；SVG是基于XML制定的，因此遵循XML语法。

坐标系统

SVG的坐标系统跟canvas以及window的一样，都是以左上角为原点，X轴向右变大，Y轴向下变大；

正则表达式是用于匹配字符串中字符组合的模式。在js中正则表达式即为RegExp对象；

构造正则表达式

方法一：pattern代表一个正则表达式（两个/之间）；flags代表匹配标志，可以由多个标志符组成！这样的一组符号（注意不是字符串）为字面量形式；

1

var expression = / pattern / flags ;

匹配标志：可以单独使用，也可以多个不同的标志组合使用，如：i，gi,gm,gmi等；