00:00
哈喽,各位小伙伴们大家好。那接下来咱们呢,去学习一下子SVG的一个基本使用。那么我相信啊,有一部分同学应该听过或者是使用过SVG。因为什么呢?因为在市场当中啊,有很多的icon图标,它底层呢,利用的就是SVG。那所以说啊,咱们呢,也去聊一聊SVG。那首先说SVG呢,是一种基于叉ML的图像文件格式。而且SVG呢,它可以开发的是什么样的一个图形呢?就是矢量图的图形。那么什么是矢量图呢?那这件事儿咱们应该知道。对于矢量图。对于用户的缩放,给它放大,它不会失真。所以说市场当中有很多的数据大屏,它利用的就是SVG。
01:01
当然SVG绘制的矢量图形啊,它有优点就是放大不失帧。但是它还有一个缺点,兼容性不是很好。IE8以下是用不了的,所以说SVG呢,既有优点又有缺点。那接下来呢,咱们呢,去看一下的SVG都可以绘制哪些图形。那咱们呢,去看一下的SVG的一个基本的使用。那首先说SVG在咱们的网页当中啊,实质就是一个标签。你可以把它想象成就是咱的canvas画布,你可以在这张纸上去绘制你想要绘制的图形。当然SVG呢,给咱们提供了一些图形,比如说你可以画什么呢?比如说画直线用Le标签。当然,你绘制的这些图形啊,务必是包裹在SVG标签的内部。
02:02
那么咱们呢,去瞄一眼,你看它可以画直线,用蜡。用pololine可以创建折线,那一条横杠是直线,什么是折?呃,什么是折线呢?比如说你画一个Z,那这是折线。那一集也可以通过rag的标签去创建矩形。Right这个单词咱接触过了,学习canvas的时候不学过一个叫feel RA填充矩形,所以说RA是矩形。以及呢,可以创建原用circle标签。以及创建圆或者椭圆。用eclipse。那么创建多边形用杠。那么以及PA可以通过点与点绘制任意的图形。那所以说啊,这些是SVG给咱们提供的一些标签,可以去创建你的图形。那所以说啊,接下来呢,咱们呢,去通过一个DEMO去学习一下子SVG的一个基本的使用。
03:07
那咱们呢,写一下呢,叫做SVG的基本的使用。那咱们呢,去建一个咱们的一个网页,比如说咱就叫做SVG的基本的使用点HTML。那首先说。你想用SVG去绘制图形,那你得有一个SVG的这样的一个标签。而且呢,它呢是一个双闭合标签。那咱们看一下子老师呢,把程序呢给它运行一下,你看这个SVG标签呢,也是有默认的宽和高的,而且也是300乘150。对吧,和咱们的canvas很像,但是它你要注意啊,你鼠标右键它可不当做一张图片啊,这要注意它就是一个标签。
04:01
那么这块呢,要注意一件事,就是SVG啊,它呢是一个双闭合标签。而且呢,它呢是有默认的宽度与高度的,是300乘150。而且呢,要注意一件事,SVG,你绘制图形,那么务必在SVG标签的内部使用绘制图形啊绘制图形。那当然啊,咱们的SVG这个图片啊,这个这个不是图片,是这个元素啊,你可以设置它的宽度和高度,可以通过样式。比如说啊,咱呢给它来一个类名叫做class,叫做box,那咱呢是可以通过样式去设定咱们的SVG标签的宽度和高度的,但是卡vas是不行的,卡vas是不允许通过样式去设置,而SVG是可以的。
05:00
那咱们呢,清除一下默认样式MARGIN0。以及咱们的拍点,拍点也为列。以及咱们的点box,那老师呢,给他来个宽度,比如说800。高度老师也给他来一个,比如说呢,给他也来一个800像素。那咱们保存运行一下,那咱审查元素看一下子,你看它的宽和高是不是800乘800。对吧,那咱们接下来呢,去学习一下的,比如说第一个去绘制一个直线啊,它利用的呢,就是LA这样的一个标签。它呢,需要四个参数,分别是X1 Y1 x2 Y2,分别呢是第一个点的水平轴跟垂直轴的坐标体系,第二个呢,也是X轴和Y轴的坐标体系,因为某一个点它在一个坐标体系当中一定是有X跟Y的,所以说是两个点的坐标体系。那所以说啊,咱们呢,老师呢,把它呢给他带走CTRLC或者咱自己写一下。
06:02
这那这里呢,咱们的绘制个线段,比如说叫做烂啊,当然得是标签Li LA。对吧,他们需要有四个属性X1啊,比如说咱给他来个100以及X2,咱呢也给他来个100以及啊啊以及啊,这个应该是Y1啊Y1。以及咱们的X2,比如说啊,咱给他来个200,以及Y2,那咱们也给他来个200。那这里呢,要注意这个呢,是两个点的坐标体系,两个点连成一条线。咱们保存一下,去运行一下,那咱们看一下,你能看到这条线是看不见的。为什么呢?因为你没有去绘制,所以说咱们呢,还需要通过一个属性叫做ST stroke就是你那个线的颜色,比如说来一个红色去进行绘制。那所以说咱们保存一下,刷新一下,你看是不是就可以看到这条线了。
07:04
两个点的坐标体积分别是100 100以及二百二百。对吧,那所以说这里呢,老师呢,也做一下笔记,比如说X1,还有这个Y1,它是第一个点的坐标。以及呢,还有X2,还有这个Y2是第二个点,第二个点的坐标。当然直线呢,你可以画多个,那比如说咱们再来一个,你看老师再给他来一个CTRLCCTRLV,咱再画条线。比如说另一条线是什么呢?另一条线呢,老师呢,想在这个位置,那也就是说一百二百。对吧,那咱来一个这样的是一百二百。对吧,再来一个200和100,那也来一个是红色,那咱们呢,刷新你看一下是不是也来了一条线,对吧,画了一个小叉子。那所以说啊,这个呢,是用蜡去绘制咱们的直线。
08:05
对吧,当然颜色什么的你可以进行调制,或者是这个线的宽度你也可以调制。比如说线的宽度呢,你可以通过ST stroke-white去设置,比如说你来个20,但是20有点有点粗了。对吧,当然你是可以调的,但是呢,咱们默认就让他来这么细就行了。对吧,所以说这是咱们的一个绘制线段,对吧,绘制直线。啊,这个呢,应该是二百一百对吧,那当然它除了绘制这样的一个直线之外呢,还可以绘制折线破了。那么绘制折线呢,有三种写法,第一种啊,叫破烂标签,它需要传入你那些折线之间的那些点,对吧,第一个点的位置,第二个点的位置,第三个点的位置,可以这么竖着写,一个一个的,但是这种写法看着怪怪的,对吧?第二种写法呢,就是每一个点之间的坐标体系呢,有一个逗号,这样看着很舒服。
09:07
第三个呢,就是每一每个点之间可以不放逗号,对吧,但老师呢,还是建议放一个逗号,所以说咱们呢给他带走,那这个呢,是咱们的一个什么呀,绘制咱们的这样的一个折现,那咱也做一下笔记,就是绘制。哎折现,哎折现。那老师呢,把它呢,给他带过来。对吧,那当然这几个点呢,咱们需要设置一下子,你看比如说咱来一个300。这呢,咱也给他来个300。比如说啊,再来个50啊,这个来个100。那这个呢,咱给他来个120,再来一个4万。对吧,那咱们呢,可以看一下的,有没有这样的相应的一个折线啊,是不是有了,但是要注意这个折线呢,它默认是被填充了,填充了颜色,那填充颜色你可以给它去掉,比如说叫做fire杠,呃,Oci。
10:06
TY,对吧,透明度为零,但这样呢,咱们可以看一下,你看还能看见了吗?是不是就看不见了,但是那些线的描边啊,你可以通过stroke给它绘制出来,ST stroke,比如说咱给它来一个什么色呢?来一个青色吧。对不,所以说咱们可以看一下咱们的这个相应的折线。对吧,比如说填充颜色给它干掉了,以及这个线咱给他描出来。当然折线你还可以有其他的点,比如说其他点咱再来一个,比如说再来一个20对吧,20,那你看这不就是相应的折线。对不啊,所以说这是咱们通过帕拉纳去绘制的相应的折线,那这里呢,老师呢,也做一下笔记,也就是说每可以多个点,可以多个点,但是需要注意多个点的时候,咱们写的时候尽可能就是最好带有什么带有逗号。
11:06
哎,带有逗号,这样呢,咱们看着语法呢,更舒服一些,对吧?这是一个点,这是一个点对吧,那么fair,呃呃,Fair这个属性老师说一下它是什么呢?它呢是那个填充的颜色,它的透明度如果是零,那不就没了吗?那stroke是什么?是你那个绘制的那个线的颜色,对吧,你得描边上对吧?哎,你得描啊,所以说呢,Stroke你可以设置那个线的颜色。对吧,这是咱们的一个绘制这样的一个折线,当然呢,你也可以去绘制矩形RA。那这里呢,他们也需要四个参数,分别是XYWH,跟咱canvas当中的参数啊,其实差不多。那所以说这块呢,老师你给他来一个这个呢,叫做绘制,哎矩形。那咱们呢,给他拿过来。那比如说啊老师呢,给他来个400对吧,这个咱也给他来个400,宽度多宽呢?比如说来个一百五高呢,来个50,那这样呢,你应该能看见一个啥呀,一个矩形咱们刷新看一下。
12:13
对不?当然填充的颜色啊,你可以换一下,比如说不喜欢黑色,你可以用fire换一个填充颜色,比如说再来一个少女色pink粉色。对不,那咱们看一下是不是就是相应的粉色呀,对吧,那所以说啊,老师来写一下的这个file属性是干什么的,是设置咱们的填充的颜色的。对吧,而它是干什么的,是设置填充颜色透明度的。对吧,零那不就是没了吗?它呢是设置什么呀,写一下设置填充颜色的透明度。对吧,当然stroke是什么,Str是咱们的这个这个呃,线的颜色的颜色啊,对吧。
13:02
所以说呢,它呢,也可以绘制相应的什么呀,相应的矩形。那当然。他们还可以绘制圆。绘制圆的时候呢,他用的是S口啊,口就本身的意思就是圆嘛。那么前两个参数CXCY是圆心点坐标R呢是半径,Style是相应的样式,对吧,那咱呢可以给他拿过来,咱们呢去测试一下子走。那这个呢,是绘制圆,哎,绘制圆啊圆形。那这个呢,老师呢,把它呢也给他拿过来,咱们呢也看一下对吧,咱诶刷新看一下,那是不是会出现这样的一个圆啊。对吧,当然圆的这个位置你可以调,比如说咱来个370。对吧,那也就是说圆的圆心往右侧挪了。对不啊,那一集他写了一个样式,就是笔触的颜色为黑色,那当然你可以来别的颜色,比如说你给他来一个青色,那你看咱绘制的这个圆,它是不是就是青色的。
14:04
对吧,那以及填充颜色呢,它是无,你也可以来一个对吧,所以说这是咱们的一个绘制圆形,这是圆心点的位置,半径以及相应的样式。对吧。好了,这是圆,当然你也可以绘制什么呢?绘制咱们的这样的一个椭圆。对吧,啊,咱们看一下子老师呢,把它呢也给它拿过来,那咱们先说一下这个参数,CXCY是圆心点的坐标2XRY分别是X轴跟Y轴的半径。那这个老师呢,给他拿回来啊,你看一下这个呢,很简单,它是可以干什么呢,可以绘制圆。哎,绘制圆形或者是椭圆。咱给他拿过来,你看老师给你搞一个。比如说啊,咱们在500 500的位置。那么水平轴的呃,长度多长呢?100,那么垂直轴的长度呢,也是100,那你这样的绘制的是一个圆。
15:04
对吧,咱们可以看你绘制的是一个圆,但是你要注意,如果说咱的Y轴的这个半径短了,比如说变成50了,那它就是一个椭圆了。对吧?这不就椭圆了吗?水平轴是100,垂直轴半径是50,那不就椭圆吗?如果也是100,那不就是圆吗?对吧,所以说这几个参数呢,要注意CXCY是你这个圆心的位置,以及RXRY分别是水平轴跟垂直轴这个半径的呃半径。对吧,啊,以及咱们再看看谁呢,就是这个多边形polo,其实跟咱们的polo烂差不多。对吧,那咱们呢,可以给他拿过来,这个呢,老师呢也写一下,这是多边形。哎,多边形,哎边啊行。其实跟咱们的polo烂底那个差不多。对吧,咱能拿几个点去测试一下子,比如说咱给他来个50。
16:03
对吧,别来50了,我想想啊,咱给他来一个行,来一个呃600对吧,600再来一个呃六百一百吧,完之后呢,再给他来一个七百一百,哎,700再来一个100,以及再来一个七百五啊750,再来个100啊750。对吧,当然咱们先看一下能不能看见啊,刷新看一下能不能看见是看不见的,对吧,那咱们呢,也最好呢,也是一样给他咋的stroke一下ST。R stroke,比如说呢,咱们给它来个红色吧,那这样咱们去看一下能不能看见对吧?啊,当然这个平行了对吧,那这个呢,咱给它调成多少呢,调成。呃,调成这个,咱来个300吧。对不,那所以说呢,这回呢,咱们呢,可以看三百一百也是一样的,对吧,那这个咱调这个吧,来个400吧,那其实这个呢,和破烂差不多。
17:02
对吧,哎,当然它也是咋也是填充了,如果说呀,你不想要填充,那也是一样的套路,叫做F-OPACI啊CI这个TY等于几等于零,套路是一样。对吧,以及线的颜色呢,是红色的对吧,所以说它呢和谁呢,和pololine差不多对吧,也是绘制多边形的。那以及最后一个派。PA呢,可以通过点与点,或者是点与点,点与点,多个点之间绘制任意图形。对吧,那咱们看一下。它也是一个标签,M是什么呢?M呢是移动到初始位置,就跟咱canvas当中的move to LA to是一样的,这不就是move to吗?Line to,其他点吗?Z呢,就是讲结束和开始点经闭合。对不,那所以说咱们呢,可以给他拿过来啊,说白了这就是啥起点跟终点咋的说闭合对吧,就是绘制任意图形对吧,那这个老师呢,也给他拿过来,那当然这里面的数据呢,咱们呢可以替换一下参数。
18:11
对不?哎,咱们可以替换一下子,当然这里呢,咱们可以给它往右面给它稍微挪挪。对吧,你不挪也没问题,对吧,那咱们看一下子吧,比如说起点的老师给他来个十啊,这个也给他来个十吧,这个咱再来个20。这个咱来一个400对吧,这个随便搞一些,那这个咱给他来一个多少呢?30啊对吧,其他点,比如这个呢,咱给他来一个120。对吧,那这个咱给他来一个40,那这个咱给他来一个66。对吧,那这个呢,咱给他来个50,那这个咱给他来个99啊,99,比如说再来再来这个咱给他来个60对吧,那这个咱给他来个一百七啊一百二都行,对吧?这个比如说咱给他来个70,那这个咱给他来个99啊,比如说这些点会组成一个啥,组成一个图行。
19:02
对不啊,当然呢,它呢也有填充颜色,填充颜色呢,你不想要还是同样的套路。对吧,可以给它去掉,透明度为零。对吧,那当然咱在这儿加一下吧,对吧,那咱们可以看一下透明度为零,是不是就看不见了,以及呢,笔触的颜色,你可以给他来一个str stroke,比如说咱给他来一个呃,来一个sky blue吧,偏蓝色。对不,那当然你也可以写16进制的对吧,都可以,所以说呢,它呢是可以通过点与点之间绘制任意你想要绘制的图形。对吧,所以说呢,这是咱们的一个SVG去绘制这样的一些图形,当然呢,这里呢,老师呢,最后呢,再说一下子,SVG它绘制的是矢量图。对吧,当用户放大之后,它的图像呢,是不会经失真的,这件事儿一定要注意。对吧,这又为什么很多的数据大屏它用SV对吧,一些SV呢也是有问题的,对于IE8以下是不兼容的,这里呢也要注意一下。
20:06
好了,那所以说这是咱们的一个SVG的一个基本使用,但这里的API啊,你可以去稍微去记一记,当然不用死记硬背对吧。
我来说两句