snowdream

::before和::after伪元素在网页中有着各种的应用，比如清除浮动，作为字体图标等进行使用；但是一直很好奇这两个伪元素与设置元素（设置元素指的是设置伪元素的依赖元素）之间到底是何种关系，以及相当于何种标签元素。

基本概念

• 字符：在XML文档中，字符是指带有一个数字值的一个或多个字节，数字值与Unicode标准对应。例如，字母g是Unicode值为103的字符。
• 符号：符号（glyph）是指字符的视觉呈现。每个字符都可以用很多不同的符号来呈现。

一个符号可能由多个字符构成。一些字体为特定的字母组合（如fl和ff）准备了单独的符号，以使它们更好看，这种特性叫作“连字”（ligature）。有时候，一个字符也可能由几个符号组合而成，比如打印程序可能会组合符号e和重音符号（ˊ）来打印字符é（Unicode 值为 233）。

与图案（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的基本原理了。

透视投影原理