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

我有一棵树

已于 2022-08-31 19:33:08 修改

阅读量643

点赞数

分类专栏： css 文章标签： css 前端

于 2022-08-30 17:28:37 首次发布

本文链接：https://blog.csdn.net/qq_17335549/article/details/126603138

版权

css 专栏收录该内容

38 篇文章 2 订阅

订阅专栏

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

前言

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

1. svg标签

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

<svg height="100" width="100"></svg>

2. polygon多边形标签

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

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

（0，0）点在左上角

<svg height="200" width="200">
     <polygon points="100,0 0,200 200,200"/>
</svg>

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

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

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

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

<svg height="200" width="200">
     <polygon points="100,0 200,200 0,100 200,100 0,200"/>
</svg>

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

3. 常用的属性

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

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

<svg height="200" width="200">
     <polygon points="100,0 200,200 0,100 200,100 0,200" fill="red" stroke="blue" stroke-width="5px" fill-rule="evenodd"></polygon>
</svg>

4. path 路径标签

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

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 7L15 12L10 17" stroke="#8D98A2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

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