基本元素：
SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。
1.使用SVG方法：
<svg width="100%" height="100%">
<circle id="mycircle" cx="50" cy="50" r="50" />
</svg>
<svg>的width属性和height属性，指定了 SVG 图像在 HTML 元素中所占据的宽度和高度。除了相对单位，也可以采用绝对单位（单位：像素）。如果不指定这两个属性，SVG 图像默认大小是300像素（宽） x 150像素（高）。
css样式设置不同：
fill：填充色
stroke：描边色
stroke-width：边框宽度
fill-opacity: 填充透明度
stroke-opacity: 边框透明度
2.基本元素：
-
矩形
<svg width="100%" height="100%"> <rect x="20" y="20" width="250" height="250" style="fill:blue;stroke:pink;stroke-width:5; fill-opacity:0.1;stroke-opacity:0.9"/> </svg> x和y表示矩形左上角离原点左上角的距离，rx和ry可以使矩形产生圆角，需要设置宽高 -
圆形
<svg width="300" height="180"> <circle cx="30" cy="50" r="25" /> <circle cx="90" cy="50" r="25" class="red" /> <circle cx="150" cy="50" r="25" class="fancy" /> </svg> cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0) r 属性定义圆的半径。 也可以使用class设置类名，通过css语法控制样式椭圆<ellipse> -
椭圆
<svg width="300" height="180"> <ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/> </svg> cx 属性定义圆点的 x 坐标 cy 属性定义圆点的 y 坐标;省略就是在0,0了；rx 属性定义水平半径，ry 属性定义垂直半径，设置成一样就是圆形 -
线段
<svg width="300" height="180"> <line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:5" /> </svg> x1 属性在 x 轴定义线条的开始,y1 属性在 y 轴定义线条的开始 x2 属性在 x 轴定义线条的结束,y2 属性在 y 轴定义线条的结束 -
折线
<svg width="300" height="180"> <polyline points="3,3 30,28 3,53" fill="none" stroke="black" /> </svg> <polyline>的points属性指定了每个端点的坐标，坐标都是距离左上角原点距离，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。 -
多边形
创建含有不少于三个边的图形 <svg width="300" height="180"> <polygon fill="green" stroke="orange" stroke-width="1" points="0,0 100,0 100,100 0,100 0,0"/> </svg> <polygon>的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。 -
路径
<svg width="300" height="180"> <path d=" M 18,3 L 46,3 L 46,40 L 61,40 L 32,68 L 3,40 L 18,40 Z "></path> </svg> <path>的d属性表示绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标。 大写代表绝对位置，所谓绝对位置即对 SVG 画布左上角原点的绝对。 小写代表相对位置，所谓相对位置是以当前画笔所在位置进行定位。 M：起始点移动到某个位置，仅移动不绘制（moveto） L：从当前画笔所在位置绘制一条直线到指定的（x,y）坐标（lineto） H: 绘制一条水平直线到参数指定的x坐标点，y坐标不变 V: 从当前位置绘制一条垂直直线到参数指定的y坐标，x坐标不变的 C: 从当前画笔位置绘制一条三次贝兹曲线到参数（x,y）指定的坐标。x1，y1和x2,y2是曲线的开始和结束 控制点，用于控制曲线的弧度 M x,y "moveto 移动到" 移动虚拟画笔到指定的（x,y）坐标，仅移动不绘制 L x,y "lineto 连直线到" 从当前画笔所在位置绘制一条直线到指定的（x,y）坐标 H x "horizontal lineto 水平连线到" 绘制一条水平直线到参数指定的x坐标点，y坐标为画笔的y坐标 V y "vertical lineto 垂直连线到" 从当前位置绘制一条垂直直线到参数指定的y坐标 C x1,y1 x2,y2 x,y "curveto 三次方贝塞尔曲线" 从当前画笔位置绘制一条三次贝兹曲线到参数（x,y）指定的坐标。x1，y1和x2,y2是曲线的开始和结束控制点，用于控制曲线的弧度 S x2,y2 x,y "shorthand 平滑三次方贝塞尔曲线" 从当前画笔位置绘制一条三次贝塞尔曲线到参数（x,y）指定的坐标。x2,y2是结束控制点。开始控制点和前一条曲线的结束控制点相同 Q x1,y1 x,y 二次方贝塞尔曲线 从当前画笔位置绘制一条二次方贝塞尔曲线到参数（x,y）指定的坐标（终点）。x1,y1是控制点，用于控制曲线的弧度 T x,y 平滑的二次贝塞尔曲线 从当前画笔位置绘制一条二次贝塞尔曲线到参数（x,y）指定的坐标。控制点被假定为最后一次使用的控制点 A rx,ry x-axis-rotation large-arc-flag,sweepflag x,y 椭圆弧线 从当前画笔位置开始绘制一条椭圆弧线到（x,y）指定的坐标。rx和ry分别为椭圆弧线水平和垂直方向上的半径。x-axis-rotation指定弧线绕x轴旋转的度数。它只在rx和ry的值不相同是有效果。large-arc-flag是大弧标志位，取值0或1，用于决定绘制大弧还是小弧。sweep-flag用于决定弧线绘制的方向 Z 无 闭合路径 从结束点绘制一条直线到开始点，闭合路径 -
文本
<svg width="300" height="180"> <text x="50" y="25">Hello World</text> </svg> <text>的x属性和y属性，表示文本区块基线（baseline）起点的横坐标和纵坐标。基线是基于文字底部的，文字的样式可以用class或style属性指定。 -
<svg viewBox="0 0 30 10" <circle id="myCircle" cx="5" cy="5" r="4"/> <use href="#myCircle" x="10" y="0" fill="blue" /> <use href="#myCircle" x="20" y="0" fill="white" stroke="blue" /> </svg> <use>的href属性指定所要复制的节点，x属性和y属性是<use>左上角的坐标。另外，还可以指定width和height坐标。 -
标签 <svg width="300" height="100"> <g id="myCircle"> <text x="25" y="20">圆形</text> <circle cx="50" cy="50" r="20"/> </g> <use href="#myCircle" x="100" y="0" fill="blue" /> <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" /> </svg> <g>标签用于将多个形状组成一个组（group），方便复用。 -
标签 <svg width="300" height="100"> <defs> <g id="myCircle"> <text x="25" y="20">圆形</text> <circle cx="50" cy="50" r="20"/> </g> </defs> <use href="#myCircle" x="0" y="0" /> <use href="#myCircle" x="100" y="0" fill="blue" /> <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" /> </svg> 用于自定义形状，它内部的代码不会显示，仅供引用 -
标签
<svg width="500" height="500"> <defs> <pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="50" cy="50" r="35" /> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" /> </svg> <pattern>标签将一个圆形定义为dots模式。patternUnits="userSpaceOnUse"表示<pattern>的宽度和长度是实际的像素值。然后，指定这个模式去填充下面的矩形。 -
标签
<svg viewBox="0 0 100 100" width="100" height="100"> <image xlink:href="path/to/image.jpg" width="50%" height="50%"/> </svg> <image>的xlink:href属性表示图像的来源。 -
动画标签
<svg width="500px" height="500px"> <rect x="0" y="0" width="100" height="100" fill="#feac5e"> <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" /> </rect> </svg> attributeName：发生动画效果的属性名。 from：单次动画的初始值。 to：单次动画的结束值。 dur：单次动画的持续时间。 repeatCount：动画的循环模式。 -
标签
<svg width="500px" height="500px"> <rect x="250" y="250" width="50" height="50" fill="#4bc0c8"> <animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="indefinite" /> </rect> </svg> 上面代码中，<animateTransform>的效果为旋转（rotate），这时from和to属性值有三个数字，第一个数字是角度值，第二个值和第三个值是旋转中心的坐标。from="0 200 200"表示开始时，角度为0，围绕(200, 200)开始旋转；to="360 400 400"表示结束时，角度为360，围绕(400, 400)旋转。
svg中元素的css样式与html不同
transform不同的地方：
- translate(x,y)平移，坐标系统原点，是svg画布的0,0位置，html元素是在自身元素的50%，50%位置；平移时translate(x,y)时参考的位置时不一样的。
- rotate(deg,x,y)选择，也是以svg画布的原点0,0位置为起始点，正数是顺时针，负数是逆时针；多出了x,y参数,表示设置旋转的原点。如果想每一次的旋转都围绕元素中心点，又不想每一次都指定（x,y），可以借助
transform-origin。 - scale(x,y)缩放，也是以svg画布原点为起始点，如果要指定为元素中心点，可以设置transform-origin：自身宽的一半，自身高的一半。
viewBox属性说明
是视区盒子的意思，表示在这个视区显示的图片，会直接显示在svg的范围之内，平铺显示。
更形象的解释就是：SVG就像是我们的显示器屏幕，viewBox就是截屏工具选中的那个框框，最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示！
<svg class="svg" viewBox='0 0 200 200' height="300" width="300" >
<rect x='0' y='0' width='100' height='100' fill="orange"></rect>
</svg>
例子:这里的viewBox的参数，前两个0,0表示坐标系原点的位置，后面表示视区的横轴和竖轴，
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Is80Foup-1688040896777)(C:\Users\lx\Desktop\原始.png)]
这里就是不使用viewBox的原始大小，就是矩形图的原始大小，原始位置
设置后其实是按照视区的大小，计算出矩形在视区中的原始位置，再平铺铺满至整个svg的大小，如图
代码里面的市区范围是0-200,0-200，横轴纵轴一样，先画出视区大小，再看图片在视区的位置，最后等比放大，矩形的实际大小可以根据放大比例计算出来，svg宽高与视口宽高比，乘以矩形原始大小，就是放大或缩小后的大小
Is80Foup-1688040896777)]
这里就是不使用viewBox的原始大小，就是矩形图的原始大小，原始位置
设置后其实是按照视区的大小，计算出矩形在视区中的原始位置，再平铺铺满至整个svg的大小，如图
代码里面的市区范围是0-200,0-200，横轴纵轴一样，先画出视区大小，再看图片在视区的位置，最后等比放大，矩形的实际大小可以根据放大比例计算出来，svg宽高与视口宽高比，乘以矩形原始大小，就是放大或缩小后的大小
感谢；张鑫旭大佬对于viewBox描述，非常生动
感谢阮一峰老师的入门教程
感谢网络上无私的道友们~~~~
761
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
