进度条是我们在Web中经常看到的一种效果，常见的进度条有水平横条和径向圆形的进度条。今天我们来看看怎么使用SVG来实现进度条的效果。使用SVG可以很容易的实现，也易于理解，最主要是使用SVG实现的进度条具有良好的跨浏览器，并且能根据浏览器屏幕尺寸很好的显示。

在上一节的《SVG线条动画实现原理》一文中，了解了SVG中线动画是怎么做的。在这篇文章中，了解了怎么借助Sketch这样的制作软件绘制SVG的路径，然后借助于SVG的stroke-dasharray和stroke-dashoffset值设置为路径的长度（最好是大于其长度，可以通过.getTotalLength()获取到路径的长度），在@keframes中的100%处设置stroke-dashoffset的值为0就可以实现线条自画的一个动画效果。原理很简单，但在上一篇文章中，看到的仅是一条路径（也就是一条线的自画效果），如果我们想对一图形进行依次自动动效呢？其实也是可以实现的。今天我们在这篇文章中就来学习一下，怎么实现。

今天我们来探索一下Carl Philipe Brenner的网站上一个微妙而有趣的动画效果。当鼠标经过网格元素时，会有一个微妙的动画发生 —— 网格元素变得透明，每条边有个顺时针的动画，创造了非常好的效果。这种效果是通过JS给span标签的宽或者高做了动画。我们待会会用SVG和CSS的transition来完成。注意，这个技术还是实验性的。

对于SVG路径动画，我相信大家都看到过这样的动效：一条线就像它自己画自己。非常的酷。@Jake Archibald是这项技巧的先驱，他在自己的博客写了一篇非常好的文章来介绍SVG的线条动画是如何实现的。@Brian Suda也在24 Ways网站上讨论过这种技术。Polygon使用它在一篇设计方面的文章里创建出了非常神奇的效果。Codrops也有很多非常酷的案例。在这篇文章中，我并没有什么要补充的，只是想把这种技术阐述的更简易些。所以，在这里我用我的方式把这种技术再次向大家阐述一遍。

任何有开发经验的前端工程师都会考虑到不成体系的设备生态所带来的挑战。设备间不同的屏幕尺寸、分辨率和比例使得产品难以提供一致的体验，对于那些对产品有着像素级完美追求的人这种体验差异尤其显著！SVG（可缩放的矢量图形）完美地解决了上文中提到的部分问题。尽管 SVG 有它的局限性，但是在某些场景下是非常有用的，如果你有一个好的设计团队，你也可以基于SVG创建一些震撼的视觉体验，而不必担心给浏览器带来过重的渲染负担或阻碍页面的加载时间。

在上一节介绍SVG填充特性中，提到了SVG中另一个特性描边特性（stroke）。SVG的描边特性主要包括stroke、stroke-width、stroke-opacity、stroke-dasharray、stroke-linecap、stroke-linejoin和stroke-miterlimit等属性。在这一节中，主要围绕这几个SVG属性进行展开。在SVG中咱们通过stroke来对绘制的图形边框进行设置，我们可以对图形边框的颜色、粗细、透明度，连接端，线帽和虚线等进行设置。为了更好的理解SVG中的描边特性，我们采用一个葡萄的轮廓图来展开介绍。

通过前面的学习，你可以用你掌握的知识来绘制任何图形，接下来的目标是给绘制的图形着色。可以使用几种方法来着色，包括指定对象的属性，使用内联CSS样式或者内嵌的CSS样式，或者使用外部的CSS样式文件。大多数的Web网站的SVG使用的是内联样式CSS。但这些方法都有各自的优缺点。在SVG中要给已绘制好的图形着色，我们主要通过SVG的填充和描边特性来完成。比如在前面的示例中，我们常能看到的fill属性，就是用来给图形设置填充颜色；stroke属性设置绘制对象的线条的颜色。但SVG的填充和描边特性不仅仅就这两个属性，那么今天的目标就是来学习这方面的特性。

SVG 全称是 Scalable Vector Graphics，即，矢量图。在 Web 中使用 SVG 可以解决位图放大失真的问题。首先，不要把 SVG 和 CSS，Canvas，HTML 搞混。他们之间并没有你中有我，我中有你的关系。SVG 是通过 XML 的形式写在 HTML 文档中的。

前段时间研究 SVG 压缩优化，发现SVG预定义的 rect、circle、ellipse、line、polyline、polygon 六种基本形状可通过path路径转换实现，这样可以在一定程度上减少代码量。不仅如此，我们常用的 SVG Path 动画(路径动画)，是以操作path中两个属性值stroke-dasharray和stroke-dashoffset来实现，基本形状转换为path路径，有利于实现路径动画。

又又一次说起贝塞尔曲线（英语：Bézier curve，维基百科详尽中文释义戳这里），我最近在尝试实现复杂的矢量图形动画，发现对贝塞尔曲线的理解馒头那么厚，是完全不能承受富有创意的创作的，至少得有我当年追我老婆的脸皮厚才行。