SVG之旅:SVG简介
自从2014年开始陆陆续续的开始就在接触SVG。但由于自身的原因,并没有对SVG进行系统化的学习,在实际的工作项目中并未真正的使用SVG相关的技术。为了储备相关的知识,并尝试在项目中使用SVG,有必要对该技术进行系统化的梳理和学习。所以开始每周会抽出大半的时间来学习和整理SVG相关的知识,希望在几个月后,这方面的技术有所突破。
![大漠](https://res.fequan.com/upload_file/avatar_image/202404/100131_e26031.jpg)
自从2014年开始陆陆续续的开始就在接触SVG。但由于自身的原因,并没有对SVG进行系统化的学习,在实际的工作项目中并未真正的使用SVG相关的技术。为了储备相关的知识,并尝试在项目中使用SVG,有必要对该技术进行系统化的梳理和学习。所以开始每周会抽出大半的时间来学习和整理SVG相关的知识,希望在几个月后,这方面的技术有所突破。
不管是在制图软件中还是Web页面的DOM元素,都有层的概念。在制图软件中,大家比较熟悉,能非常的清晰的看出图层的概念。而在Web页面中,特别是我们熟悉的HTML的DOM中,其实他也有层的概念。不同的是制图软件可以用鼠标拖动图层来改变层次,而DOM中需要依赖于CSS的z-index
属性来控制他的层次关系。其实在SVG中,他也有层和渲染顺序的概念。今天我们就来看看SVG中的图层和渲染顺序相关的知识。
在未学习SVG之前,在Web页面或Web应用中使用一些基本形状一般都是通过CSS的border
来模拟或者clip-path
来绘制图形形状,也有使用Canvas来绘制。当然也有很多时候直接使用img
或者background-image
直接来引用图形。而在SVG中,提供了更为强大的图形形状的能力,可以直接通过SVG来绘制矩形、圆角矩形、圆形、多边形和曲线等。如果对Illustrator或者Sketch可以很轻松的绘制出基本形状,然后导出SVG文件。今天我们主要来了解在SVG中怎么通过代码来绘制基本形状。
通过上一节的学习,我们知道了怎么在SVG中绘制一些基本的图形。在SVG中除了可以通过<rect>
、<circle>
、<ellipse>
、<polygon>
、<line>
、<polygon>
来绘制矩形、圆形、椭圆、多边形、直线和折线等形状。除此之外,在SVG中还有一个<path>
元素,可以帮助我们在SVG中绘制任何你想要的形状。也有人说,掌握了SVG中的<path>
是学习SVG的重中之重。今天我们来了解SVG中有关于<path>
的相关知识。
通过前面的学习,你可以用你掌握的知识来绘制任何图形,接下来的目标是给绘制的图形着色。可以使用几种方法来着色,包括指定对象的属性,使用内联CSS样式或者内嵌的CSS样式,或者使用外部的CSS样式文件。大多数的Web网站的SVG使用的是内联样式CSS。但这些方法都有各自的优缺点。在SVG中要给已绘制好的图形着色,我们主要通过SVG的填充和描边特性来完成。比如在前面的示例中,我们常能看到的fill
属性,就是用来给图形设置填充颜色;stroke
属性设置绘制对象的线条的颜色。但SVG的填充和描边特性不仅仅就这两个属性,那么今天的目标就是来学习这方面的特性。
在上一节介绍SVG填充特性中,提到了SVG中另一个特性描边特性(stroke
)。SVG的描边特性主要包括stroke
、stroke-width
、stroke-opacity
、stroke-dasharray
、stroke-linecap
、stroke-linejoin
和stroke-miterlimit
等属性。在这一节中,主要围绕这几个SVG属性进行展开。在SVG中咱们通过stroke
来对绘制的图形边框进行设置,我们可以对图形边框的颜色、粗细、透明度,连接端,线帽和虚线等进行设置。为了更好的理解SVG中的描边特性,我们采用一个葡萄的轮廓图来展开介绍。
对于SVG路径动画,我相信大家都看到过这样的动效:一条线就像它自己画自己。非常的酷。@Jake Archibald是这项技巧的先驱,他在自己的博客写了一篇非常好的文章来介绍SVG的线条动画是如何实现的。@Brian Suda也在24 Ways网站上讨论过这种技术。Polygon使用它在一篇设计方面的文章里创建出了非常神奇的效果。Codrops也有很多非常酷的案例。在这篇文章中,我并没有什么要补充的,只是想把这种技术阐述的更简易些。所以,在这里我用我的方式把这种技术再次向大家阐述一遍。
在上一节的《SVG线条动画实现原理》一文中,了解了SVG中线动画是怎么做的。在这篇文章中,了解了怎么借助Sketch这样的制作软件绘制SVG的路径,然后借助于SVG的stroke-dasharray
和stroke-dashoffset
值设置为路径的长度(最好是大于其长度,可以通过.getTotalLength()
获取到路径的长度),在@keframes
中的100%
处设置stroke-dashoffset
的值为0
就可以实现线条自画的一个动画效果。原理很简单,但在上一篇文章中,看到的仅是一条路径(也就是一条线的自画效果),如果我们想对一图形进行依次自动动效呢?其实也是可以实现的。今天我们在这篇文章中就来学习一下,怎么实现。
在SVG中,对于很多初学者或者使用SVG有一段时间的同学来说,有几个概念总是会相互混淆。比如,SVG的画布、视窗(Viewport)、ViewBox等。这几个概念对于学习或掌握SVG来说是非常必要的。在此我们一起来学习和了解这几个概念。
在《图解SVG的核心概念》一文中,花了很长的篇幅和大家深入的探讨了SVG中的几个核心概念。有了这些基础概念之后,对于学习和理解SVG方面的知识会变得更容易。时至今日,设计SVG的应用软件也越来越多,比如我们熟悉的Adobe Illustrator以及近几年较为流行的Sketch和Figma等。不过今天,我想结合Sketch软件帮助大家更好的理解SVG的一些基础知识。如果您感兴趣的话,请继续往下阅读。