大家好，欢迎来到IT知识分享网。
文章目录
1.SVG概述
SVG是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。
2.svg标签
2.1.视图(viewport)和单位
viewport指的是SVG图像的可视区域，一个SVG图像的viewport可以无限大，但是可视区域最大只能是屏幕的分辨率，通过svg元素中的width和height属性指定viewport的大小。在svg中默认的单位为px，能够写单位，也能够不写单位。在数值的后面可以指定单位，一般单位的名称如下所示：
| 名称 | 解释 |
|---|---|
| em | 默认的字体大小，通常一个字符的高度 |
| ex | 字符x的高度 |
| px | 像素 |
| pt | 点数，1/72英寸 |
| pc | Picas，1/6英寸 |
| cm | 厘米 |
| mm | 毫秒 |
| in | 英寸 |
2.2.坐标系统
y轴右方x为正值，x轴下方y为正值。简而言之，x轴向右为正，y轴向下为正。下面展示一个svg源码，指定一个宽高为10cm的可视区域，绘制两个矩形。
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="10cm" height="10cm" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g> <rect x="50" y="100" width="50" height="50" style="stroke: #000000; fill: none;"/> <rect x="100" y="100" width="50mm" height="50mm" style="stroke: #000000; fill: none;" /> </g> </svg> 
2.3.viewBox
可以使用viewBox来指定自己的用户坐标系统。如果你指定的用户坐标系统和viewport坐标系统的宽高比相同，它将会被拉伸填充满整个viewport区域。
viewBox = "<min-x> <min-y> <width> <height>" min-y、min-y指定viewBox的左上顶点坐标，width和height指定viewBox的宽高，这里的四个值均不可为零或负值。通过该值和preserveAspectRatio属性的设置可以视图坐标和用户坐标的变换，想要深入了解的读者可以查阅相关资料，本文就介绍最常用的一种情况，就是viewBox和视图一致。
3.g标签
<g>标记就是’group’的简写，是用来分组用的，它能把多个元素放在一组里，对<g>标记实施的样式和渲染会作用到这个分组内的所有元素上。组内的所有元素都会继承<g>标记上的所有属性。
4.公共属性
用于描述svg元素的样式显示属性，包括颜色，边框，线宽等属性。显示属性既可以在元素的属性中表达，也可以用CSS样式属性来表达。
简单样式名称和值如下表所示：
| 参数 | 描述 | 值 |
|---|---|---|
| fill | 填充图形颜色 | 颜色，渐变 |
| stroke | 绘制图形的边框颜色 | 颜色，渐变 |
| stroke-width | 绘制图形的边框宽度 | 数值 |
| stroke-linejoin | 线条连接处样式 | miter|round|bevel |
| stroke-linecap | 线条首尾处样式 | butt|round|square |
| transform | 属性变换 | translate|scale|rotate |
| transform-origin | 变换中心 | 数值|百分比|位置 |
5.几何图形
在SVG中，写在前面的元素先被渲染，写在后面的元素后被渲染。后渲染的元素会覆盖前面的元素，虽然有时候受透明度影响，看起来不是被覆盖的，但是SVG确实是严格按照先后顺序来渲染的。默认线宽为stroke-width=“1” 。
注意：SVG是以XML定义的，所以是大小写敏感的。
5.1 绘制直线
绘制一条直线，从点(x1,y1)到(x2,y2)。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"> <line x1="40" y1="30" x2="200" y2="89" style="stroke:burlywood;stroke-width:1"></line> </svg> | 参数 | 是否必须 | 描述 |
|---|---|---|
| x1 | 否 | 直线起点的x坐标，默认是0 |
| y1 | 否 | 直线起点的y坐标，默认是0 |
| x2 | 是 | 直线终点的x坐标 |
| y2 | 是 | 直线终点的y坐标 |
| style | 否 | 显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性 |
5.2 绘制矩形
绘制一个矩形或者圆角矩形，创建一个宽150，高100，圆角半径15的矩形。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"> <rect x="200" y="50" rx="15" ry="15" width="150" height="100" fill="azure" stroke="burlywood" stroke-width="2"></rect> </svg> | 参数 | 是否必须 | 描述 |
|---|---|---|
| x | 否 | 矩形左上角的x坐标，默认是0 |
| y | 否 | 矩形左上角的y坐标，默认是0 |
| rx | 否 | 矩形水平方向的圆角半径，默认是0 |
| ry | 否 | 矩形垂直方向的圆角半径，默认与rx相等 |
| width | 是 | 矩形宽度 |
| height | 是 | 矩形高度 |
| style | 否 | 显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性 |
5.3 绘制椭圆
绘制一个椭圆，创建一个圆心在(cx,cy)，X轴半径为rx，Y轴半径为ry的椭圆。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"> <ellipse cx="250" cy="100" rx="50" ry="50" style="fill:azure;stroke:burlywood;stroke-width:2"></ellipse> </svg> | 参数 | 是否必须 | 描述 |
|---|---|---|
| cx | 否 | 圆心的x坐标，默认是0 |
| cy | 否 | 圆心的y坐标， 默认是0 |
| rx | 是 | 圆心的X轴半径 |
| ry | 否 | 圆心的Y轴半径，默认为rx的值 |
| style | 否 | 显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性 |
5.4 绘制圆
绘制一个圆，创建一个圆心在(cx,cy)，半径为r的圆。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg> | 参数 | 是否必须 | 描述 |
|---|---|---|
| cx | 否 | 圆心的x坐标，默认是0 |
| cy | 否 | 圆心的y坐标， 默认是0 |
| r | 是 | 圆的半径 |
| style | 否 | 显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性 |
5.5 多边形
绘制一个又一系列点组成的多边形。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"> <polygon points="90,10 110,50 170,50 110,70 150,120 90,80 50,120 70,70 30,50 80,50" style="fill:azure;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></polygon> </svg> | 参数 | 是否必须 | 描述 |
|---|---|---|
| points | 是 | 曲线上点的坐标集合。 图形的绘制是根据points的点坐标从左向右开始，如，对于points=“x1,y1 x2,y2 x3,y3 x4,y4”；图形从（x1,y1）开始，然后连接（x2,y2），再连接（x3,y3），再连接（x4,y4），最后首尾相连（连接起点x1，y1），最终形成闭合的图形。 |
| style | 否 | 显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性 |
5.6 折线
绘制一个又一系列点组成的折线，与多边形的区别在于最后一点不连接起始点。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"> <polyline points="90,10 110,50 170,50 110,70 150,120 90,80 50,120 70,70 30,50 80,50" style="fill:azure;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></polygon> </svg> | 参数 | 是否必须 | 描述 |
|---|---|---|
| points | 是 | 曲线上点的坐标集合。 图形的绘制是根据points的点坐标从左向右开始，如，对于points=“x1,y1 x2,y2 x3,y3 x4,y4”；图形从（x1,y1）开始，然后连接（x2,y2），再连接（x3,y3），再连接（x4,y4）。 |
| style | 否 | 显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性 |
5.7 路径
绘制复杂的多边形，一些列复杂的点组成的轨迹路径。每一次使用指令，当前位置自动移动到结束点，也就是相对位置，是相对上一段的结束点。
| 参数 | 是否必须 | 描述 |
|---|---|---|
| d | 是 | 绘制路径的指令以及参数。 |
| style | 否 | 显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性。 |
d参数：大写的指令代表了绝对定位(以画布左上角为0点)，而小写则代表相对定位(以上一个点为0点)；
| 指令 | 参数 | 描述 |
|---|---|---|
| M | x y | 将当前的起始位置（当前点）移动到x, y |
| L | x y | 将路径当前结束位置与x, y相连接 |
| H | x | 将路径当前结束位置与x, 当前位置y相连接 |
| V | y | 将路径当前结束位置与当前位置y, x相连接 |
| Q | cx cy px py | 由一个控制点C与结束点P来控制二次贝塞尔曲线的绘制 |
| C | cx1 cy1 cx2 cy2 px py | 由两个控制点C1,C2和结束点来控制三次贝塞尔曲线的绘制 |
| T | x y | 由一个控制点(默认是上一个锚点的镜像)，和结束点来绘制光滑的二次贝塞尔曲线 |
| S | cx1 cy1 px py | 由两个控制点(默认是上一个锚点的镜像)和C1以及一个结束点P来绘制光滑的三次贝塞尔曲线 |
| A | rx ry xa lf sf ex ey | 由七个参数控制，详情看A指令 |
| Z | 无 | 结束绘制并连接起点 |
5.7.1 M指令和L指令
M指令表示起始点，L指令表示下一个点。绘制一条路径从(20,90)，经过(100,100)和(190,20)。如下所示：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"> <path d="M20,90 L30,10 L100,100 L190,20" style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></path> </svg> 5.7.2 H指令和V指令
H指令：连接到水平线上的某个点。V指令：连接到垂直线上的某个点。绘制一条路径从(20,90)，X轴坐标转到40，然后Y轴坐标转到120。如下所示：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"> <path d="M20,90 H40 V120" style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></path> </svg> 5.7.3 Q指令
绘制一条二次贝塞尔曲线，二次贝塞尔曲线由一个起点、一个控制点和一个结束点来控制。M表明起始点，Q表明控制点和结束点。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"> <path d="M20,20 Q100,50,80,120" style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></path> </svg> 5.7.4 C指令
绘制一条三次贝塞尔曲线，三次贝塞尔曲线由一个起点、两个控制点和一个结束点来控制。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"> <path d="M20,20 C100,10 200,50 80,120" style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></path> </svg> 5.7.5 T指令
T指令是用于创建平滑的二次贝塞尔曲线，T指令只需规定结束点的位置，其控制点的位置应为其上一个控制点关于该结束点对称点，如果上一个控制点不存在，则最后一个锚点的位置即为控制点的位置
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"> <path d="M20,20 C100,10 200,50 80,120" style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></path> </svg> 5.7.6 S指令
创建平滑的三次贝塞尔曲线，S指令需规定一个控制点和一个结束点，与T指令类似，其第一个控制点的位置应为其上一个控制点关于该结束点的对称点，如果上一个控制点不存在，则最后一个锚点的位置即为第一个控制点的位置；第二个控制点由S指令来规定。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"> <path d="M20,20 S100,30,70,40 S120,150,60,120" style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></path> </svg> 5.7.7 A指令
A指令用于绘制一段弧线，弧线实际是一个取自椭圆上两个点之间的弧，第一个点是路径最后一个锚点，第二个是结束点，弧线的细节由几个主要的参数控制。
语法： rx ry xa lf sf ex ey
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"> <path d="M130,130 A40,30,0,1,1,180,170" style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></path> </svg> | 参数 | 描述 |
|---|---|
| rx | 椭圆长轴半径 |
| ry | 椭圆短轴半径 |
| xa | 椭圆与x轴的夹角 |
| lf | 所取的弧大小，1取大弧，0取小弧 |
| sf | 绘制弧线的方向，1顺时针绘制，0逆时针绘制 |
| ex | 结束点的x坐标 |
| ey | 结束点的y坐标 |
6.defs标签
<defs>元素用于嵌入可在SVG映像内重用的定义。
7.pattern标签
使用预定义的图形对一个对象进行填充或描边，就要用到pattern元素。pattern元素让预定义图形能够以固定间隔在x轴和y轴上重复（或平铺）从而覆盖要涂色的区域。先使用pattern元素定义图案，然后在给定的图形元素上用属性fill或属性stroke引用用来填充或描边的图案。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"> <defs> <pattern id="s18" x="7" y="7" width="2" height="2" patternUnits="userSpaceOnUse"> <text x="0" y="2" font-size="1.5" font-family="Gulim" fill="#">18</text> </pattern> </defs> <polygon points="90,10 110,50 170,50 110,70 150,120 90,80 50,120 70,70 30,50 80,50" fill="url(#s18)"></polygon> </svg> | 名称 | 描述 |
|---|---|
| patternUnits | 用来定义图案效果区域的单位。 它为模式内的各种长度值以及定义模式子区域的属性指定坐标系。 如果patternUnits =“userSpaceOnUse”，则值表示使用’pattern’元素时当前用户坐标系中的值。 如果patternUnits =“objectBoundingBox”，则值表示在使用’pattern’元素时就地引用元素上的边界框的分数或百分比的值。 默认是objectBoundingBox。 |
| patternContentUnits | 用来定义模式内容区域的单位。 它为模式内的各种长度值以及定义模式子区域的属性指定坐标系。 如果patternContentUnits =“userSpaceOnUse”，则值表示使用’pattern’元素时当前用户坐标系中的值。 如果patternContentUnits =“objectBoundingBox”，则值表示在使用’pattern’元素时就地引用元素上的边界框的分数或百分比值。 默认是userSpaceOnUse。 |
| x | 图案边界框的x轴坐标。 缺省值是0。相当于图案整体平移，在userSpaceOnUse下有效。 |
| y | 图案边界框的y轴坐标。 缺省值是0。相当于图案整体平移，在userSpaceOnUse下有效。 |
| width | 图案边界框的宽度。 缺省值是0。 |
| height | 图案边界框的高度。 默认是0。 |
| preserveAspectRatio | 以保留原始内容的宽高比。 |
| xlink:href | 用于指另一种模式。 |
8.text标签
8.1.文字基本
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"> <g id="coordinates" stroke="black" stroke-width="1"> <path d="M10 0v90m0 -60h200m-200 30h200m-200 30h200"></path> </g> <g id="text"> <text x="10" y="30">First Line</text> <text x="10" y="60" stroke="black">Second Line</text> <text x="10" y="90" stroke="blue" fill="none" stroke-width=".5">Third Line</text> </g> </svg> 
8.2.tspan-文字分区
让部分文字呈现出不同的样式。
允许被嵌入在
内部来实现。同时还有两个属性dx,dy针对上一个tspan的偏移，(x,y)是将
内的文字定位到其坐标系的(x,y)位置。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"> <g id="coordinates" fill="none" stroke="black" stroke-width="1"> <path d="M10 0v30h200m-190 0v30h190m-180 0v30h180"></path> </g> <g id="text" font-size="2rem"> <text x="10" y="30">first line <tspan x="20" y="60">second line</tspan> <tspan dx="2" dy="10">third line</tspan> </text> </g> </svg> 
8.3.textPath-文字路径
内嵌于
中的元素，通过xlink:href属性指向一个
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"> <defs> <path id="circle" d="M70 20 a40 40 0 1 1 -1 0"></path> </defs> <text> <textPath xlink:href="#circle"> Text following a circle............. </textPath> </text> 9.作者答疑
如有疑问，请留言。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/133828.html
