snowdream

与图案（pattern）一样，渐变也只是专门用来被填充的，所以也需要事先在defs中进行定义。

SVG中的渐变分为线性渐变（linearGradient）和径向渐变（radialGradient）两种，从名字就能看出这是两种不同方向的渐变，所以参数也会有所不同。

线性渐变

线性渐变由linearGradient标签所定义，线性渐变主要受直线的方向和渐变点的位置的影响，也就是沿着直线的方向按照渐变点的颜色设置进行变化。

渐变点

渐变点就是在linearGradient标签内所定义的<stop>元素，该元素有以下的属性：

• offset：偏离位置，范围为0-1（0%-100%）；实际上就是在直线方向（这个方向其实可看作向量方向）上的位置。

• stop-color：该渐变点的颜色

• stop-opacity：该渐变点的不透明度

  阅读全文 »

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

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

原理

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

透视投影原理

需求

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

基本概念

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

坐标系统

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