你知道的越多，你不知道的越多
点赞再看，养成习惯
本文 GitHub：https://github.com/qq449245884/xiaozhi 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
## SVG 简介
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 浏览器的兼容情况
图形系统
计算机中描述图形信息的两大系统是栅格图形和矢量图形。
栅格图形
在栅格图形系统中，图像被表示为图片元素或者像素的长方形数组如下图片所示。每个像素用其 RGB 颜色值或者颜色表内的索引表示。这一系列也称为 位图，通过以某种压缩格式存储。由于大多数现代显示设备也是栅格设备，显示图像时仅需要一个阅读器将位图解压并将它传输到屏幕上。
创建
SVG 图像
SVG 文档基本结构
如下所示，是一个 SVG 文档结构：
根元素 以像素为单位定义了整个图像的 和 ，还通过 属性定义了 SVG 的命名空间。 元素的内容可以被阅读器显示在标题栏上或者是作为鼠标指针指向图像时的提示， 元素允许咱们为图像定义完整的描述信息。
基本形状和属性
基本图形
、、、、、
基本属性
、、、
基本形状 — 圆形
指定样式的属性
接着在添加两个圆表示两个眼睛。上面的 与 是写在 里面的，但是 SVG 也允许咱们使用单独的属性，而不用全部写在 内，如下所示：
这很好理解，就不多说了。 这里我们需要把胡须作为一个部件，并包装在分组元素 (后面会讲)里面，然后给下 ，如下所示：
其他基本图形
如下图所示，咱们使用 元素构建嘴和耳朵，它接受一对 和 坐标为 属性的值。你可以使用空格或者逗号分隔这些数值。
世界不可变，而视野是可以改变的。在SVG中，提供了和属性来控制视野。
线段
SVG 可以使用
笔画的特性
线段可以看作画面上画出来的笔画。笔画的尺寸、颜色和风格都会影响线段的表现。这些特性都可以在 属性指定。
stroke-width
是设置线段的粗细，如下所示：
如果不指定笔画颜色的话，将看不到任何线，因为 stroke 属性的默认值是 none
stroke-dasharray 属性
有时咱们需要点线和虚线，刚需要使用 stroke-dasharray 属性，它的值由一列数字构成，代表线的长度和空隙的长度，数字之间用逗号或空格隔开。数字的个数应该为偶数，但如果是奇数，则 SVG 会重复几次，让总数为偶数。
矩形是最简单基本形状，只需要其左上角 和 坐标以及它的宽度()和高度()，如果想要指定圆角，可以指定 (x方向的圆角半径)，该最大值是矩形宽度的一半，同理，(y 方向的圆角半径)，该最大值是矩形高度的一半。如果只指定了 和 中的一个值，则认为它们相等，矩形内部还可以使用 属性来填充颜色，默认为黑色，用 stroke 来绘制边框，默认透明。来几个例子看看。
来源：@大迁世界
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！