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

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

SVG的图层

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

我们先来看看制图软件中的图层,比如Sketch的软件中:

SVG的图层

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

SVG的图层

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

SVG的图层

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

SVG的图层

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

<svg width="275px" height="275px" viewBox="0 0 275 275">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect fill="#4A90E2" x="11" y="100" width="204" height="175"></rect>
        <polygon fill="#BD10E0" points="0 0 230.109375 35.8164062 89.5898438 221.050781"></polygon>
        <ellipse fill="#F02929" cx="179.5" cy="147.5" rx="95.5" ry="96.5"></ellipse>
    </g>
</svg>

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

感觉有点偏主题了。回到正题中,如果你仔细看了代码之后,你会发现在制图软件中圆 -> 三角形 -> 矩形 。对应的图层顺序也是圆 -> 三角形 -> 矩形 ,但在代码中却不一样,反过来了矩形 -> 三角形 -> 圆。如图所示:

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/svg/svg-layer.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部