在这篇教程里，我们将重新创建一个类似The Christmas Experiments网站中看到的hover样式。我们将通过SVG制作出形状，然后使用Snap.svg做出hover时的动画效果。如果你已经访问过The Christmas Experiments最新版本的网站，你可能会注意到其中Christmas calendar很酷的三角状的hover效果。那个形状其实是一个带边框的三角形。今天我会向您展示，如何使用SVG和Snap.svg做出同样的效果。我们的想法是，使用一条路径创建一个SVG，用它来表示caption的形状背景，然后在hover时改变这个路径。完成这一任务有很多种创作的可能性，今天我们将做出三个不同的示例。使用SVG的好处是，我们可以根据父容器的大小调整形状的大小，使一切都成为流动的。

CSS和SVG有很多共同之处。CSS有很多特性都是从SVG中引入过来的。其中就有“剪切”的特性。CSS和SVG都允许我们对一个元素进行非矩形的剪切。在这篇文章中，将介绍CSS和SVG中的剪切技术。

SVG全称为“可缩放矢量图形”，它的名字暗示着它本身的特点。SVG让我们可以将一个图形从100%放大到1000%并且完全不失真。SVG是一个基于XML并可以在SVG对象中描述不同形状和路径的文件。每一个形状和路径都由一系列的点、位置、长度、半径，等等的来组成。如果你曾经使用过任何的矢量图软件 (像 Adobe Illustrator 或 Corel Draw)，你能将你创建的矢量图轻松地输出为SVG文件。

随着技术向前的推进，SVG相关的讨论也越渐频繁。为了紧跟时代的步伐，我也开始步入SVG相关技术的探索与学习之中。从这篇文章开始会在W3cplus站点上陆续向大家推出有关于SVG相关的教程、译文或案例等。感兴趣的同学可以跟随着教程一起了解与学习SVG相关的知识与技巧。

在《SVG简介与嵌入HTML页面的方式》简单的介绍了什么是SVG？以及SVG图形与其它格式图像相比，优势在哪。另外介绍怎么将SVG图像应用到HTML页面，让浏览器能显示。从文中了解到，SVG图形其实就是一段XML代码，在HTML页面引用是通过引用.svg文件格式，或者直接在.html文件中放置<svg>元素。而两者最大的区别就是，独立的SVG必须添加一个XML声明。那么这篇文章要和大家一起探讨的就是SVG文件(.svg)的结构。

viewport、viewBox和preserveAspectRatio是SVG中基础而且必须了解的几个部分，如果这几个部分没有理解清楚，对大家今后学习SVG相关知识以及使用会带来很大障碍。这几日看到张大师(@张鑫旭)写了一篇与此相关的文章《理解SVG的viewport,viewBox,preserveAspectRatio》,特意将此文转载致此。

CSS Sprites对于前端人员都比较熟悉，为了让Web网站减放Http的请求数，很多同学都常使用Sprites（国内称之为雪碧图或精灵）。但随着技术的更新，位图的Sprites已无法满足我们实际的需求了。这篇译文就用另外的一种方式，向大家阐述了Sprites——如何实现跨浏览器的SVG Sprites。

SVG其实相当于一块画板，然后在这块画板上绘图形，而每个画板都会有一个坐标系统。比如说画板的原始起点，绘制图形的起始点坐标，终点坐标等。这一切的一切都离开不坐标，而这些坐标就组成了一个坐标系统。在这篇文章的所要介绍就是SVG中一个关键知识点——SVG坐标。简单点理解SVG坐标就是屏幕坐标点(从技术上讲，最初的viewport坐标系统)与任何SVG元素相关联的坐标点系统（当前用户坐标系统）。例如，一个<svg>中使用<circle>绘制的一个圆，他就使用了一个标准的笛卡尔坐标系统(Cartesian Coordinate System)。