不管是在制图软件中还是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文件中,你将看到的效果如下: