【我不熟悉的css 】02. 手动画一个svg图片

每日鸡汤：生活不会变好，但是你会

目录

前言

1. svg标签

2. polygon多边形标签

3. 常用的属性

4.  path 路径标签

总结

前言

之前对于svg的使用一直停留在设计给我们图片，然后和普通的图片一样使用的阶段，直到前几天，我在学习vue官网的时候，看到了这个案例，好家伙，原来我们可以自己画一个svg，那么我们就来简单的自己画一个svg的图片看看吧。

1. svg标签

 首先最外层，肯定要包一层svg标签，并且可以设置宽高，它的宽高是不需要单位的。

2. polygon多边形标签

polygon标签用来创建不少于三个边的图形（需要能够闭合的坐标），所以人家叫多边形，

points 属性定义多边形每个角的 x 和 y 坐标， 先x，后y，下面我们画一个三角形，很明显

（0，0）点在左上角

 注意，points的坐标是需要有顺序的，才能得到你想要的图案，相当于用笔连接几个点，会依照先后顺序连接。假设，我们想画一个五角星，有五个关键点，按照顺序，顺时针坐标分别是：

（100, 0)   (200, 100)  (200, 200) (0, 200) (0, 100)

 

如果我们 直接按照这个顺序给points属性设置值，会怎么样呢？

很显然，相当于【系统】拿着一支笔，在根据points 属性的坐标顺序，画一个一笔画成的图形，线条扫过的区域都会被填充，如果我们按照，画五角星的顺序设置坐标，就得到了一个五角星。笔扫过的地方形成了封闭的图形。

我知道不太像，但是我们先假装他是五角星~(｡≧з≦)ﾉ⌒☆.

3. 常用的属性

1. stroke 定义了图形外轮廓的颜色
2. stroke-width 外轮廓的宽度
3. fill   图形内部颜色
4. fill-rule 确定多边形那些属于内部区域（evenodd | nonzero)

现在使用上面四个属性，把我们的五角星掏空，并且给他一个轮廓的颜色

4.  path 路径标签

在开发过程中，设计师，提供了一堆svg的图片，我们可以用vscode打开，可以看到源代码，同时可以安装vscode的插件，在编辑器中直接预览（我之前好蠢，都是用浏览器打开，还得打开文件所在文件夹，再用浏览器打开）

找个自己喜欢的插件预览，很方便的，我用的是这个。 

 我们发现，在svg的源代码中，有一个path标签，这个标签很常见，的很多icon都有，所以我有必要研究一下他， 如果有些颜色不对，我们可以自己源代码改，就不用再找设计师重新要图了。

 xmlns 命名空间 SVG是xml方法，XML内容通过给明确的标签显示“命名空间声明”来告诉使用者哪个方言标签名称属于哪个

元素用于定义一个路径。好好研究一下path的d属性，这个【d】属性决定了路径的走向

d="M10 7L15 12L10 17"

其实这个是一块一块的，每个英文字母代表一种操作，后面跟着x、y坐标，紧跟着下一个操作。坐标自然是相对于svg而言的，坐标原点同样在左上角，因为svg是矢量图

M:  move to

L:   line to

更多

 所以这个【d属性】的操作是，拿起一支笔：

（1）把笔放到坐标为（10， 7）的位置、开始画线

（2）画直线，到至坐标（15，12）停止

（3）再继续画直线，到（10， 17）停止

 我为什么要画这么简单的图，因为我很闲

所以我们可以画出任何我们想要的路径，自己在vscode中试一下吧

• stroke-linejoin 属性指明路径的转角处使用的形状或者绘制的基础形状。用这个属性（round）你可以得到一个圆润的折角

• stroke-linecap 属性制定了，在开放子路径被设置描边的情况下，用于开放自路径两端的形状，（round）你可以得到一个圆润的线条

 好了，其他的先不说了

总结

 简单的了解svg的源码的好处是，我们在需要简单改图的时候，比如颜色，不需要向设计重新要图片啦。