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

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

SVG的图层

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

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

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

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

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

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

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

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

了解了图层的规则后,我们看看SVG代码和Sketch里面的图层的对照。可以看出,SVG中的每一个元素都对应制图软件中的一个图层,比如、和等元素。至于这些元素起什么作用,怎么用,暂且不在这篇文章中阐述。后面介绍SVG绘制图形一节中将会详细介绍这些绘图元素。

上面看一的是单个元素(单个图形)占一个独立的层。事实上,多个元素组成一个图形,那么这个情况又将会是什么样?同样先用制图软件来操作一下:

制图软件中有两个层和,事实下每个图层中又有三个层:

用同样的方法,将上面的图导出SVG文件,来看对应的SVG代码:

从代码中可以看出,如果一层里有多个元素时,在SVG中会用元素来表示图形。看上去其实就是图层中嵌套了图层。

上面借助了Sketch制图软件让我们理解了SVG中的图层的概念。虽然里面的代码我们暂时还不明白其具体的意思,但这并不重要,因为后续的学习,我们就能清楚的知道他们具体的作用和怎么使用。

SVG渲染顺序

从上面的代码中可以看出,在文本编辑器里编写SVG代码就可以绘制出所需要的图形。那么SVG中绘制过程有自己的基本原则:

解析顺序和绘制顺序一致,都要遵守XML中元素的位置排列。SVG中元素在XML中有固定的排列顺序,浏览器渲染时会遵守这个顺序,绘制时也同样会遵守这个顺序。也就是说先出现的元素会出现在绘制的底层,而后出现的元素会绘制在顶层,如果元素间的位置有重叠,则会现后绘制的元素会盖住先出现的元素

子节点会继承父节点的一些属性(这个和CSS的属性有点类似),比如和等

整个SVG绘制处理过程可以用下图简单的来描述:

不过在绘制SVG时,有一些细节需要注意:

解析SVG文档时,忽略DTD验证:虽然是 DTD 是 XML 解析的标准验证方式,但是很多工具制作的 SVG,DTD 会缺失,所以解析时应该忽略 DTD 验证,不然会直接造成解析错误

解析SVG文档时,一些元素的属性值可能有多种方式:多边形的点集,元素的 ,都是一个数字集合,集合的分割方式可能是空格,。 也可能是其他符号,所以在解析时需要兼容多种分割方式。颜色的表示,长度单位等,也可能会出现多种形式,如颜色有已知颜色和颜色值等形式,都需要做兼容

元素的某些属性会继承父级元素:、等属性,都需要考虑父级元素的继承关系。其中 会复杂一些, 的 矩阵,会包括缩放、平移、旋转等信息,子元素的平移信息,需要和父级元素做缩放相乘后,再做平移

元素属性的默认值:很多工具导出的 SVG,是会忽略一些属性的,而这些属性如果没有值,我们是没办法正确显示的。所以我们需要针对它们设置默认值。例如 默认应该是 , 默认是 , 默认为, 默认为 。这里重点说一下 ,它分为 和 两种方式

解析顺序与渲染顺序,描边与填色的顺序:解析顺序和渲染顺序必须一致,并且和 XML 中的顺序一致,否则会出现错误的遮挡现象和绘制顺序倒转。描边和填色的顺序,基本原则是,单个元素的描边完成后,操作填色,然后再操作下一个元素。当然这里的填色可以灵活控制,比如保存所有填色,等所有描边完成后,一次性填色

包含标签的绘制:包含 标签的 SVG,处理起来会有些特殊的地方。这种 SVG 的存在,一般是设计师通过 Photoshop 编辑图片后,再导入 Sketch 中生成的 SVG。处理这种 SVG 的绘制时,基本思路是:解析 标签,当做 SVG 的底图,用一个透明遮罩挡住;然后解析后面的 标签,这是只需要解析 和 ,不需要 ,用这里的 去涂抹底图,涂抹过的地方,透明遮罩失效,底图露出,就达到了涂抹出底图线条的目的

有一点需要特别提出来的是,在SVG中无法通过CSS的来改变他们层级的。比如前面的示例:

虽然在第一个上设置了,第二个设置了,但并没有如我们期望的一样,第一个显示在第二个的上面,还是按照SVG的渲染顺序来渲染。

要解决这个问题,只能通过JavaScript来动态改变SVG的元素顺序。比如:

最终效果如下:

注意: 对于已经存在的对象,则是移动了标签的位置。

总结

通过这一节的内容介绍,特别是借助于制图软件,让我们更好的理解了SVG的中图层中的概念,以及其渲染顺序。从而对SVG有了更深一层的了解。虽然这些都还只是SVG的基础,还不足以支承你做有意思的东东。但逐步进行下去,我们会有所收获的。

如果文章中有不对之处,还请路过大神拍正。如果你有更好的建议或经验,欢迎在下面的评论中与我们一起分享。如果你对这个系列的教程感兴趣的话,欢迎持续关注后续的更新。下一节,我们将学习SVG中的坐标系统。SVG的坐标系统相关的知识重要哟。

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20171215G0ZHEJ00?refer=cp_1026

相关快讯

扫码关注云+社区