SVG之旅：SVG的图层和渲染顺序

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

SVG的图层

首先我们来看SVG图层这个东东，相信只要使用过制图软件，比如Photoshop或者Sketch等，对于图层的认识并不会陌生。当然，你要是设计师出身的话，这方面的认识一定要远远高过工程师。前面也说过了，不管是在制作软件中，还是在Web页面中，都有图层的概念。比如我们经常接触的Web页面，能常常看到图片盖在图片上和文字本盖在图片上等现象。事实上这些都是图层的应用，只是往往没有图，只有层。在制图软件中，为了方便理解由上到下的概念，在图层面板中的图层都是由上到下排列，上层会盖住下层。但在Web页面或者程序里，也因为逻辑规则，图层则是由下而上排列，下层会盖住上层（除非做了特殊处理）。

我们先来看看制图软件中的图层，比如Sketch的软件中：

在制图软件中，控制图层比较方便，鼠标拖动就可以，比如下面的操作：

通过Sketch可以很轻易的将刚才的绘制的图形转出.svg文件。操作步骤很简单，如下所示：

这个时候，你可以通过文本编辑软件打开导出来的.svg文件。你可以看到SVG的代码（因为还没有正式学习怎么手动编写SVG代码），刚才导出的文件代码如下：

有一大堆冗余的代码，现在先人肉来处理不需要的代码，后面的文章中将会介绍怎么通过工具来处理.svg中不需要的代码。处理完的代码如下：

如果你把这个.svg通过<img>和<object>元素引入，或者直接将代码内联到HTML文件中，你将看到的效果如下：