-
SVG 入门指南(看完,对SVG结构不在陌生)
2744 职业解析 | 2026-01-16 00:32:26 本文 GitHub https://github.com/qq44924588... 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。
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 浏览器的兼容情况SVG 与 Canvas 区别图形系统计算机中描述图形信息的两大系统是栅格图形和矢量图形。
栅格图形在栅格图形系统中，图像被表示为图片元素或者像素的长方形数组如下图片所示。每个像素用其 RGB 颜色值或者颜色表内的索引表示。这一系列也称为 位图，通过以某种压缩格式存储。由于大多数现代显示设备也是栅格设备，显示图像时仅需要一个阅读器将位图解压并将它传输到屏幕上。
矢量图形矢量图是基于数学的描述，如下图的多啦A梦，他的头是一条怎么样的贝塞尔曲线，它的参数是什么及用什么颜色来填充贝塞尔曲线，通过这种方式描述图片就是适量图。
想象一下在一张绘图纸上作图的过程，栅格图形的工作就像是描述哪个方格应该填充什么颜色，而矢量图形的工作则像是描述要绘制从某个点到另一个点的直线或曲线。
创建 SVG 图像SVG 文档基本结构如下所示，是一个 SVG 文档结构：
代码语言：javascript复制
Cat Stick Figure of Cat 根元素
Stick Figure of Cat 指定样式的属性接着在添加两个圆表示两个眼睛。上面的 stroke 与 fill 是写在 style 里面的，但是 SVG 也允许咱们使用单独的属性，而不用全部写在 style 内，如下所示：
代码语言：javascript复制
Cat Stick Figure of Cat 图形对象分组接着使用两个
元素在猫的右脸上添加胡须，先看下线的示意图： 这很好理解，就不多说了。 这里我们需要把胡须作为一个部件，并包装在分组元素
(后面会讲)里面，然后给下 id ，如下所示： 代码语言：javascript复制
Cat Stick Figure of Cat 图形对象分组接着使用
代码语言：javascript复制
Cat Stick Figure of Cat 其他基本图形如下图所示，咱们使用
元素构建嘴和耳朵，它接受一对 x 和 y 坐标为 points 属性的值。你可以使用空格或者逗号分隔这些数值。 代码语言：javascript复制
Cat Stick Figure of Cat style='stroke:black; fill:none' />
style='stroke:black; fill:none'/>
路径所有的基本形状都是通用的
元素的快捷写法。接着使用 元素为猫添加鼻子。如下所示的代码，翻译过来就是 "移动到坐标(75, 90)。绘制一条到坐标(65,90) 的直线。然后以 x 半径为 5、y 半径为 10 绘制一个椭圆，最后回到坐标 (75, 90) 处" 代码语言：javascript复制
Cat Stick Figure of Cat style='stroke:black; fill:none' />
style='stroke:black; fill:none'/>
style='stroke:black; fill:#ffcccc'
/>
路径由于这只是一个简单的图形，用户可能看不出这是一只猫，所以咱们可以使用
元素添加一些文本注释。在 元素中，x 和 y 属性用于指定文本的位置，如下所示： 代码语言：javascript复制
Stick Figure of Cat style='stroke:black; fill:none' />
style='stroke:black; fill:none'/>
style='stroke:black; fill:#ffcccc'
/>
Cat 如果看不懂代码，没关系，后面几章节会深入这些基本及属性。在网页中使用 SVGSVG 是一种图件格式，因此可以使用与其他图像类型相同的方式包含在 HTML 页面中。具体可以采用两种方法：将图像包含在
元素内（当图像是页面的基本组成部分时，推荐这种方式）；或者将图像作为另一个元素的 CSS 样式属性插入(当图像主要用来装饰时，推荐这种方式)。
在
元素内包含 SVG在
元素内包含 SVG 图像非常简单，只需设置 src 指向 SVG 文件位置即可。如下:
代码语言：javascript复制
在 CSS 中包含 SVG可以使用 background-image 属性来显示 SVG，如果没有固有尺寸， SVG 会被缩放为元素高度和宽度的 100%，如下所示：代码语言：javascript复制div.background-cat {
background-image: url('cat.svg');
background-size: 100% 100%;
}使用 object 标签引入 SVG （不推荐）
代码语言：javascript复制
Stick Figure of Cat SVG 的视窗，视野和全局（世界）视窗
SVG的属性width、height来控制视窗的大小，也称为SVG容器
世界
SVG里面的代码，就是对SVG世界的定义
视野
世界是无穷大的，视野是观察世界的一个矩形区域。如下图所示
世界不可变，而视野是可以改变的。在SVG中，提供了viewBox和preserveAspectRatio属性来控制视野。
线段SVG 可以使用
元素画出一条直线，使用只需要指定线段的起(x1, y1)止(x2, y2)点。 代码语言：javascript复制
笔画的特性线段可以看作画面上画出来的笔画。笔画的尺寸、颜色和风格都会影响线段的表现。这些特性都可以在 style 属性指定。
stroke-widthstroke-width 是设置线段的粗细，如下所示：
代码语言：javascript复制
笔画的颜色和透明度可以通过以下几种方式指定笔画颜色：
基本颜色关键字： 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,来几个例子演示一下：
来几个例子演示一下：
代码语言：javascript复制
如果不指定笔画颜色的话，将看不到任何线，因为 stroke 属性的默认值是 none
stroke-dasharray 属性有时咱们需要点线和虚线，刚需要使用 stroke-dasharray 属性，它的值由一列数字构成，代表线的长度和空隙的长度，数字之间用逗号或空格隔开。数字的个数应该为偶数，但如果是奇数，则 SVG 会重复不次，让总数为偶数。
代码语言：javascript复制
style='stroke-dasharray:9, 5; stroke: black; stroke-width:2'
/>
style='stroke-dasharray:9, 5, 9, 2; stroke: black; stroke-width:2' />
style='stroke-dasharray:9, 3, 5; stroke: black; stroke-width:2' />
矩形矩形是最简单基本形状，只需要其左上角 x 和 y 坐标以及它的宽度(width)和高度(height)，如果想要指定圆角，可以指定 rx(x方向的圆角半径)，该最大值是矩形宽度的一半，同理，ry(y 方向的圆角半径)，该最大值是矩形高度的一半。如果只指定了 rx 和 ry 中的一个值，则认为它们相等，矩形内部还可以使用 fill 属性来填充颜色，默认为黑色，用 stroke 来绘制边框，默认透明。来几个例子看看。
代码语言：javascript复制
style='fill: #0000ff;stroke: red;stroke-width: 7; stroke-opacity: .5'/>
style='stroke:black; fill:none'/>ry5'
style='stroke:black; fill:none' />
圆和椭圆画一个圆，需要使用
元素，并指定圆心的 x 和 y 坐标(cx/cy) 以及半径(r)。和矩形一样，不指定 fill 和 stroke 时，圆会使用黑色填充并且没有轮廓线。 代码语言：javascript复制
style='stroke:black; fill:none'
/>
style='stroke:black; fill:none'
/>
对于椭圆来说，除了指定圆心和坐标外，还需要同时指定 x 方向的半径和 y 方向的半径，属性分为是 rx 和 ry。对于圆和椭圆来说，如果省略 cx 或者 cy ，则默认为 0，如果半径为 0，则不会显示图形，如果半径为负数，则会报错。来几个例子看看：
多边形咱们可以使用
元素绘制多边形，使用 points 属性指定一系列的 x/y 坐标对，并用逗号或者空格分隔坐标个数必须是偶数。指定坐标不需要在最后指定返回起始坐标， 元素会自动回到起始坐标。来几个例子看看： 代码语言：javascript复制
style='fill:red; stroke: black;'
/>
style='fill: #ccffcc; stroke: green;'
/>
style="fill: yellow; fill-opacity:.5; stroke:black"
/>
从上面很容易看出多边形都很容易填充，因为多边形的各边都没有交叉，很容易区分出多边形的内部区域和外部区域。但是，当多边形彼此交叉的时候，要区分哪些区域是图形内部并不容易。如下如融合所示，中间的区域是算内部还是外部呢？
代码语言：javascript复制
style='fill:none; stroke: black;'
/>
SVG有两种判断某个点是否在多边形中的规则。分别对应fill-true属性的nonezero（默认值）和evenodd。其效果图分别如下：
代码语言：javascript复制
style='fill-rule: nonzero; fill:yellow; stroke: black;'
/>
style='fill-rule: evenodd; fill:red; stroke: black;' />
拆线
元素与 有相同的属性，不同之处在于图形并不封闭，直接来个事例看看： 代码语言：javascript复制
style="stroke:black; stroke-width:3; fill:none"
/>
总结形状元素线段：
矩形：
圆角矩形：
圆形：
椭圆形：
多边形：
折线：
//注意需把fill设成none 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 一样，如下所示：
代码语言：javascript复制
* 内部样式表 用法也跟 css 的类名一样，如下所示：
代码语言：javascript复制.linestyle{
stroke:red;
stroke-width:2;
}
// 那么在使用标签时，指定此样式即可：
外部样式表 跟 CSS 用法一样，把样式写在另外文件中，然后导入使用。
表现属性
咱们可能通过 style 属性修改样式，当然 style 里面的属性值，可以单独写，这种也叫表现属性：
代码语言：javascript复制
fill='red' stroke='black' stroke-width='2'/> 分组与引用对象虽然可以将所有的绘图看成是由一系列几乎一样的形状和线条组成的，但通常咱们还是认为大多数非抽象的艺术作品是由一系列命名对象组成的，而这些对象由形状和线条组合而成。SVG 提供了一些元素，允许咱们对元素进行这样的分组，从而使文档更加结构化以及更易理解。
元素1） 元素会将所有子元素作为一个组合，通常还有一个唯一的id作为名称; 2）每个组合还可以拥有自己的
和<desc>来供基于文本的xml应用程序识别或者为视障用户提供更好的可访问性;</p> <p>3）阅读器会读取<title>和<desc>元素的内容。鼠标悬停或者轻触组合内的图形时，会显示<title>元素内容的提示框。</p> <p>4）<g>元素可以组合元素并可以提供一些注释，组合还可以比较嵌套;</p> <p>在起始 <g> 标签中指定的所有样式会应用于组合内的所有子元素，如下面示例所示，咱们可以不用复制每个元素上的 style='fill:none; stroke:black;'</p> <p>代码语言：javascript复制 <svg width='240' height='240' xmlns='http://wwww.w3.org/2000/svg'></p> <p><title>欢乐一家人 一家人在一起就是简单幸福的了 房子 男人 女人 2）定义了一组
图形对象后，使用 3）
因此为了创建另一个上面的房子和一组小人，只要把下面的代码入
代码语言：javascript复制
元素上面例子有几个缺点： 复用 man 和 woman 组合时，需要知道原始图像中这些图形的位置，并以此位置作为利用的基础，而不是使用诸如 0 这样的简单数字房子的填充和笔画颜色由原始图形建立，并且不能通过
1）SVG规范推荐我们将所有想要复用的对象放置在元素内，这样SVG阅读器进入流式环境中就能更轻松地处理数据。
2）由于组合在
元素内，它们不会立刻绘制到屏幕上，而是作为"模板"供其他地方使用。 代码语言：javascript复制
欢乐一家人 一家人在一起就是简单幸福的了 房子 男人 女人 夫妻 元素 作为模板，同 一样，内部的所有元素都不会展现在画布上，因此咱们无需把它放在 规范内。然而，咱们还是习惯将它放到 中，因为 symbol 也是咱们定义的供后续使用的元素。 代码语言：javascript复制
image 元素
顾名思义里面放图片的，至于说是矢量图(vector)还是位图(raster)，都成，用起来也方便： 代码语言：javascript复制
width='160' height='120'
/>
代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
参考：
腾讯课堂《走入SVG》
慕课网《走进SVG》
皇上吉祥：古代宫廷策略挑战赛