通过上一节的学习，我们知道了怎么在SVG中绘制一些基本的图形。在SVG中除了可以通过<rect>、<circle>、<ellipse>、<polygon>、<line>、<polygon>来绘制矩形、圆形、椭圆、多边形、直线和折线等形状。除此之外，在SVG中还有一个<path>元素，可以帮助我们在SVG中绘制任何你想要的形状。也有人说，掌握了SVG中的<path>是学习SVG的重中之重。今天我们来了解SVG中有关于<path>的相关知识。

在未学习SVG之前，在Web页面或Web应用中使用一些基本形状一般都是通过CSS的border来模拟或者clip-path来绘制图形形状，也有使用Canvas来绘制。当然也有很多时候直接使用img或者background-image直接来引用图形。而在SVG中，提供了更为强大的图形形状的能力，可以直接通过SVG来绘制矩形、圆角矩形、圆形、多边形和曲线等。如果对Illustrator或者Sketch可以很轻松的绘制出基本形状，然后导出SVG文件。今天我们主要来了解在SVG中怎么通过代码来绘制基本形状。

SVG 渲染使用 painter 的模型来描述图像如何渲染到屏幕。像墙上的油漆层，上层的内容遮盖下层的内容。SVG 规范定义了哪些内容会绘制在其他内容之上。每个形状的不同部分 —— stoke，fill，marker —— 每个都创建绘制层。这些形状绘制在其他层之上，层的顺序就是他们在文档中被定义的顺序。两个新的属性被引入 SVG2 规范，他们是 z-index 和 paint-order，允许你改变渲染规则。

不管是在制图软件中还是Web页面的DOM元素，都有层的概念。在制图软件中，大家比较熟悉，能非常的清晰的看出图层的概念。而在Web页面中，特别是我们熟悉的HTML的DOM中，其实他也有层的概念。不同的是制图软件可以用鼠标拖动图层来改变层次，而DOM中需要依赖于CSS的z-index属性来控制他的层次关系。其实在SVG中，他也有层和渲染顺序的概念。今天我们就来看看SVG中的图层和渲染顺序相关的知识。

自从2014年开始陆陆续续的开始就在接触SVG。但由于自身的原因，并没有对SVG进行系统化的学习，在实际的工作项目中并未真正的使用SVG相关的技术。为了储备相关的知识，并尝试在项目中使用SVG，有必要对该技术进行系统化的梳理和学习。所以开始每周会抽出大半的时间来学习和整理SVG相关的知识，希望在几个月后，这方面的技术有所突破。

Scalable Vector Graphics (SVG)是在XML中描述二维图形的语言。这些图形由路径，图片和（或）文本组成，并能够在不失真的情况下任意变换尺寸。本书主要介绍了内联SVG，它是指在HTML中编写的嵌入式代码，以便在浏览器中生成这些图形。以这种方式使用SVG有许多优点，包括为了交互目的访问所有图形的各个部分，支持访问 SVG 文档构成的 DOM 节点树，查询、修改 DOM 节点的属性，提升用户可访问性。先介绍基本组织和简单形状，再继续描述SVG坐标系或画布，然后用它绘制图形的内部和/或边框，变换，以及使用和操作图形文本。通过渐变和模式等更高级的功能来总结。这个指南快速且详细的介绍内联式SVG以及所有涵盖的可使用的功能，有助于你学习SVG。 它面向设计师和开发人员，希望以最可行的方式将SVG添加到他们的工作流程中。

从小笔画细节到开始使用手工制作的模式，本指南旨在成为一个围绕“go-to”编写SVG的参考。

我们处于一个用像素来作为度量衡的互联网世界中。 对于一名在互联网世界中工作的设计师和开发者来说, 像素对于我们来说亦敌亦友。 我们希望自己创作出的Web中每一张图片、每一像素都能棱角分明（如网站中的logo，icon以及任何修饰性的图片），清晰的在任何设备上展现给用户的同时， 也能尽可能的保证图片的体积来优化性能。而SVG就是解决上面问题非常棒的一个方案。SVG 意为可缩放矢量图形（Scalable Vector Graphics）与屏幕分辨率无关, 体积上能使用Gzip的方式压缩, 而且修改编辑都很方便。本文是SVG在Web开发中一些常见的应用场景、技巧以及使用方法的一个简单的入门指南。

CSS3的动画相关的基础的属性基本都涉猎过了，个人认为，其中最复杂的是d:path()路径变形动画，超过3D，而位移、轨迹、旋转、缩放、斜切什么的，相对简单一些，但作为非动画设计师而言，灵活的掌握这些基本的动画加以无穷无尽的变换，就已经能做出很多华丽丽的效果了，这篇呢，源于做一个练习时，AI的连续旋转复制功能，试着做了几个动效，简单、省时、高效，最主要的是用到CSS3的transform:rotate()旋转属性，辅以位移和缩放。

进度圈(Progress Circles)是经典的仪表盘元素，可以将统计数据直观地展现为摘要视图。我们可以通过JavaScript和Canvas渲染，再配合CSS，图片或者利用SVG实现一个进度圈。使用SVG实现一个进度圈并没有想象中那么难，我们先从基本的开始。

同HTML元素一样，我们可以通过transform函数操作SVG元素。然而transform在SVG元素和HTML元素上的工作方式会有一些差别。首先，IE不支持SVG元素的CSS transform属性，但是如果只是应用一些2D变换，为了适配IE,我们可以使用SVG的transform属性。SVG的transform属性中的所有函数的参数只能是纯数字，比如说，我们不能在translate函数中使用%单位（虽说在火狐浏览器中的CSS transform属性也不能使用—此处有链接—），rotate，skew角度只能使用deg单位，我们能在CSS transform属性中可以使用的所有其它单位在这里都不能使用。