SVG 入门指南(看完,对SVG结构不在陌生)
你知道的越多，你不知道的越多
点赞再看，养成习惯
本文 GitHub：https://github.com/qq449245884/xiaozhi 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
SVG，即可缩放矢量图形(Scalable Vector Graphics)，是一种 XML 应用，可以以一种简洁、可移植的形式表示图形信息。目前，人们对 SVG 越来越感兴趣。大多数现代浏览器都能显示 SVG 图形，并且大多数矢量绘图软件都能导出 SVG 图形。SVG 主要可以概括为以下几点：
- SVG 指可伸缩矢量图形
- SVG 用来定义网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
- SVG 是万维网联盟的标准
- SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
SVG 的应用
- 图表视图(echart)、地图视图(WEB-GIS)
- 形象(AI)的全网应用
- UI 产品的设计
- SVG 动画
SVG 浏览器的兼容情况
SVG 与 Canvas 区别
图形系统
计算机中描述图形信息的两大系统是栅格图形和矢量图形。
栅格图形
在栅格图形系统中，图像被表示为图片元素或者像素的长方形数组如下图片所示。每个像素用其 RGB 颜色值或者颜色表内的索引表示。这一系列也称为 位图，通过以某种压缩格式存储。由于大多数现代显示设备也是栅格设备，显示图像时仅需要一个阅读器将位图解压并将它传输到屏幕上。
矢量图形
矢量图是基于数学的描述，如下图的多啦A梦，他的头是一条怎么样的贝塞尔曲线，它的参数是什么及用什么颜色来填充贝塞尔曲线，通过这种方式描述图片就是矢量图形。
想象一下在一张绘图纸上作图的过程，栅格图形的工作就像是描述哪个方格应该填充什么颜色，而矢量图形的工作则像是描述要绘制从某个点到另一个点的直线或曲线。
说到后台学习
创建
SVG 图像
SVG 文档基本结构
如下所示，是一个 SVG 文档结构：
根元素 以像素为单位定义了整个图像的 width 和 height，还通过 xmlns 属性定义了 SVG 的命名空间。
指定样式的属性
接着在添加两个圆表示两个眼睛。上面的 stroke 与 fill 是写在 style 里面的，但是 SVG 也允许咱们使用单独的属性，而不用全部写在 style 内，如下所示：
图形对象分组
接着使用两个
这很好理解，就不多说了。 这里我们需要把胡须作为一个部件，并包装在分组元素 id ，如下所示：
图形对象分组
接着使用 复用胡须分组并将它变换(transfrom) 为左侧胡须，如下图所示，首先在 scale 变换中对 x 坐标乘以 -1，翻转坐标系统。这意味原始坐标系统中的点(75, 95) 现在位于 (-75, 95)。接着通过 translate 向左平移调整对应的位置。
其他基本图形
如下图所示，咱们使用 x 和 y 坐标为 points 属性的值。你可以使用空格或者逗号分隔这些数值。
路径
所有的基本形状都是通用的 (75, 90)。绘制一条到坐标(65,90) 的直线。然后以 x 半径为 5、y 半径为 10 绘制一个椭圆，最后回到坐标 (75, 90) 处”
路径
由于这只是一个简单的图形，用户可能看不出这是一只猫，所以咱们可以使用 元素添加一些文本注释。在 元素中，x 和 y 属性用于指定文本的位置，如下所示：
如果看不懂代码，没关系，后面几章节会深入这些基本及属性。
在网页中使用 SVG
SVG 是一种图件格式，因此可以使用与其他图像类型相同的方式包含在 HTML 页面中。具体可以采用两种方法：将图像包含在
在 元素内包含 SVG
在 src 指向 SVG 文件位置即可。如下:
在 CSS 中包含 SVG
可以使用 background-image 属性来显示 SVG，如果没有固有尺寸， SVG 会被缩放为元素高度和宽度的 100%，如下所示：
div.background-cat {
background-image: url('cat.svg');
background-size: 100% 100%;
}
使用 object 标签引入 SVG （不推荐）
元素的 type 属性表示要嵌入的文件类型。这个属性应该是一个有效的网络媒体类型(通常被称为 MIME 类型)。对于 SVG，使用 type='image/svg+xml'。如下所示：
在网页中直接使用 SVG 标签
直接引用 svg 定即可，如下所示：
SVG 的视窗，视野和全局（世界）
视窗
SVG的属性width、height来控制视窗的大小，也称为SVG容器
世界
SVG里面的代码，就是对SVG世界的定义
视野
世界是无穷大的，视野是观察世界的一个矩形区域。如下图所示
世界不可变，而视野是可以改变的。在SVG中，提供了viewBox和preserveAspectRatio属性来控制视野。
线段
SVG 可以使用 元素画出一条直线，使用只需要指定线段的起(x1, y1)止(x2, y2)点。
笔画的特性
线段可以看作画面上画出来的笔画。笔画的尺寸、颜色和风格都会影响线段的表现。这些特性都可以在 style 属性指定。
stroke-width
stroke-width 是设置线段的粗细，如下所示：
笔画的颜色和透明度
可以通过以下几种方式指定笔画颜色：
- 基本颜色关键字： aqua、black、blue、fuchsia、gray、green 等
- 由 6 位十六进制指定的颜色，形式为
#rrggbb，其中rr表示红色,gg表示绿色,bb表示蓝色，它们的范围都是00--ff - 由 3 位十六进制指定的颜色，形式为
#rgb，其中r表示红色，g表示绿色,b表示蓝色，它们的范围都是0-f。 - 通过
rgb()形式指定的rgb颜色值，每个值的取值范围都是整数0-255或者百分比0 - 100% - currentColor 关键字，表示当前元素应用的 CSS 属性 color 的值。color 是用来给 HTML 的文本设置颜色的，会被子元素继承，但对 SVG 没有直接效果。
线段都是实线，咱们也可以使用 stroke-opacity 来控制线的透明度，取值范围和 CSS 一样 0.0-1.0,来几个例子演示一下：
来几个例子演示一下：
如果不指定笔画颜色的话，将看不到任何线，因为 stroke 属性的默认值是 none
stroke-dasharray 属性
有时咱们需要点线和虚线，刚需要使用 stroke-dasharray 属性，它的值由一列数字构成，代表线的长度和空隙的长度，数字之间用逗号或空格隔开。数字的个数应该为偶数，但如果是奇数，则 SVG 会重复几次，让总数为偶数。
矩形
矩形是最简单基本形状，只需要其左上角 x 和 y 坐标以及它的宽度(width)和高度(height)，如果想要指定圆角，可以指定 rx(x方向的圆角半径)，该最大值是矩形宽度的一半，同理，ry(y 方向的圆角半径)，该最大值是矩形高度的一半。如果只指定了 rx 和 ry 中的一个值，则认为它们相等，矩形内部还可以使用 fill 属性来填充颜色，默认为黑色，用 stroke 来绘制边框，默认透明。来几个例子看看。
圆和椭圆
画一个圆，需要使用 x 和 y 坐标(cx/cy) 以及半径(r)。和矩形一样，不指定 fill 和 stroke 时，圆会使用黑色填充并且没有轮廓线。
对于椭圆来说，除了指定圆心和坐标外，还需要同时指定 x 方向的半径和 y 方向的半径，属性分为是 rx 和 ry。对于圆和椭圆来说，如果省略 cx 或者 cy ，则默认为 0，如果半径为 0，则不会显示图形，如果半径为负数，则会报错。来几个例子看看：
多边形
咱们可以使用 points 属性指定一系列的 x/y 坐标对，并用逗号或者空格分隔坐标个数必须是偶数。指定坐标不需要在最后指定返回起始坐标，
从上面很容易看出多边形都很容易填充，因为多边形的各边都没有交叉，很容易区分出多边形的内部区域和外部区域。但是，当多边形彼此交叉的时候，要区分哪些区域是图形内部并不容易。如下如融合所示，中间的区域是算内部还是外部呢？
SVG有两种判断某个点是否在多边形中的规则。分别对应fill-true属性的nonezero（默认值）和evenodd。其效果图分别如下：
折线
总结
形状元素
线段：
矩形：
圆角矩形：
圆形：
椭圆形：
多边形：
折线：
SVG有两种判断某个点是否在多边形中的规则。分别对应fill-true属性的nonezero（默认值）和evenodd。其效果图分别如下：
笔画特性：
| 属性 | 值 |
|---|---|
| stoke | 笔画颜色，默认为none |
| stroke-opacity | 笔画透明度，默认为1.0（完全不透明），值范围：0.0~1.0 |
| stroke-dasharray | 用一系列数字指定虚线和间隙的长度，如：stroke-dasharray:5,10,5,20 |
| stroke-linecap | 线头尾的形状：butt（默认）、round、square |
| stroke-linejoin | 图形的棱角或一系列连线的形状：miter（尖的，默认值）、round（圆的）、bevel（平的） |
| stroke-miterlimit | 相交处显示宽度与线宽的最大比例，默认为4 |
填充颜色
| 属性 | 值 |
|---|---|
| fill | 指定填充颜色，默认值为 black |
| fill-opacity | 从 0.0 到 1.0 的数字， 0.0 表示完全透明, 1.0(默认值) 表示完全不透明 |
| fill-rule | 属性值为 nonzero (默认值) 或 evenodd。 |
在 SVG 中使用样式
在 SVG 的使用样式中 CSS 很相似，主要有 4 种，分别如下：
- 内联样式
- 内部样式表
- 外部样式表
- 表现属性
内联样式
用法跟 css 一样，如下所示：
内部样式表
用法也跟 css 的类名一样，如下所示：
.linestyle{
stroke:red;
stroke-width:2;
}
// 那么在使用标签时，指定此样式即可：
外部样式表
跟 CSS 用法一样，把样式写在另外文件中，然后导入使用。
表现属性
咱们可能通过 style 属性修改样式，当然 style 里面的属性值，可以单独写，这种也叫表现属性：
分组与引用对象
虽然可以将所有的绘图看成是由一系列几乎一样的形状和线条组成的，但通常咱们还是认为大多数非抽象的艺术作品是由一系列命名对象组成的，而这些对象由形状和线条组合而成。SVG 提供了一些元素，允许咱们对元素进行这样的分组，从而使文档更加结构化以及更易理解。
1）
2）每个组合还可以拥有自己的
1）复杂的图形中经常会出现重复元素，svg 使用元素为定义在
2）定义了一组标签再次显示它们。要指定想要的重用的组合就给xlink:href属性指定URI即可，同时还要指定x和y的位置以表示组合应该移动到的位置。
3）元素并不限制只使用在同一个文件内的对象，还可以指定任意有效的文件或者URI.
因此为了创建另一个上面的房子和一组小人，只要把下面的代码入 元素里面即可。
上面例子有几个缺点：
-
复用
man和woman组合时，需要知道原始图像中这些图形的位置，并以此位置作为利用的基础，而不是使用诸如0这样的简单数字 -
房子的填充和笔画颜色由原始图形建立，并且不能通过 元素覆盖，这说明咱们不能构造一行彩色的房子。
-
文档中会画出所有的三个元素 woman,man 和 house,并不能将它们单独 ‘存储’ 下来，然后只绘制一排房子或者只绘制一组人。
1）SVG规范推荐我们将所有想要复用的对象放置在元素内，这样SVG阅读器进入流式环境中就能更轻松地处理数据。
2）由于组合在
image 元素
参考：
腾讯课堂《走入SVG》
慕课网《走进SVG》
交流
因为篇幅的限制，今天的分享只到这里。如果大家想了解更多的内容的话，欢迎公众号**《大迁世界》**，了解更多的资讯和有价值的内容。