• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用于定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
  • SVG 是万维网联盟的标准
  • 优势：
  • SVG 图像可通过文本编辑器来创建和修改
  • SVG 图像可被搜索、索引、脚本化或压缩
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大

矢量图。放大不会失真，适合大面积的贴图，通常动画较少的或者简单，使用标签和css去画
Canvas:适合用于小面积的绘图，适合动画

SVG 画线

使用 元素创建线
使用css（stroke: black;）渲染到页面上

  1.     <style>
  2.         .line1{
  3.             stroke: black;
  4.             stroke-width: 3px;
  5.         }
  6.         .line2{
  7.             stroke: red;
  8.             stroke-width: 5px;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <svg width="500px" height="500px" style="border: 1px solid #000;" >
  14.         <line x1="100" y1="100" x2="200" y2="200" class="line1"></line>
  15.         <line x1="200" y1="100" x2="200" y2="200" class="line2"></line>
  16.     </svg>
  17. </body>

效果如下
image.png

SVG画虚线

  1.     <style>
  2.         .line1{
  3.             stroke: black;
  4.             stroke-width: 10;
  5.             /* 画虚线 */
  6.             stroke-dasharray: 10px 20px 30px;
  7.         }
  8.     </style>
  9. </head>
  10. <body>
  11.     <svg width="500px" height="500px" style="border: 1px solid #000;" >
  12.         <line x1="100" y1="100" x2="250" y2="100" class="line1"></line>
  13.     </svg>
  14. </body>

stroke-dasharray: 10px 20px 30px; 可以填多值 填进去的值就可以看做是一个数组，但是会一直循环数组的里的value
注意线是无限延长的 ，只是规定啦显示区域，故只能看到一部分
image.png
第一个虚线为10px 后面的空白为20px 第二虚线为30px 后面的空白为10px 第三个虚线为20px 后面的空白为30px ,
如果填入的是一个值，那就一直循环那一个值。
stroke-dashoffset : 偏移的像素值， 向左移动线条
简易动画demo

  1.     <style>
  2.         @keyframes move{
  3.             0%{
  4.                 stroke-dashoffset: 200px;
  5.             }
  6.             100%{
  7.                 stroke-dashoffset: 0px;   
  8.             }
  9.         }
  10.         .line1{
  11.             stroke: black;
  12.             stroke-width: 10;
  13.             /* 画虚线 */
  14.             stroke-dasharray: 200px;
  15.               /* 线段偏移*/
  16.             stroke-dashoffset: 200px;
  17.             animation: move 1s linear infinite alternate;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <svg width="500px" height="500px" style="border: 1px solid #000;" >
  23.         <line x1="100" y1="100" x2="250" y2="100" class="line1"></line>
  24.     </svg>
  25. </body>

SVG画矩形

使用绘制矩形不需要css渲染
在SVG中所有闭合的图形，默认是填充的

  1.     <svg width="500px" height="500px" style="border: 1px solid #000;" >
  2.         <rect height='50' width="100" x="10" y="10" ry="10"></rect>
  3.     </svg>

效果图
image.png

SVG画圆与画椭圆

画圆形
r:半径
cx，cy: 圆心
画椭圆
rx:x轴半径
ry:y轴半径

  1.         <circle r="50" cx="100" cy="100"></circle>
  2.         <ellipse rx="100" ry="30" cx="150" cy="180"></ellipse>

效果图
image.png image.png

SVG画折线


points = “第一个点的坐标 ，第二点的坐标，第三个点的坐标，……..”
点的坐标用空格隔开，线段用逗号隔开，最少填入三个点的坐标，填入一个和两个坐标默认情况下不会显示，假设css设置其填充颜色和线段的颜色后会显示

  1.     <style>
  2.         polyline{
  3.             fill: transparent; /*填充透明色*/
  4.             stroke: red;/*设置线段的颜色*/
  5.         }
  7.     </style>    
  8. <polyline points="0 0 , 20 30 , 50 50 , 100 10"></polyline>

默认情况下会自动闭合，闭合图形就会触发填充 当其css设置其填充颜色与线条颜色后 此处线条是加粗过的默认线条太细啦不利与观察
image.png image.png

SVG画多边形


与 大致一样，只有在改变其填充颜色与线条颜色后，不会闭合，会闭合
如图所示 改变其填充颜色与线条颜色后 改变其填充颜色与线条颜色后
示例图形的代码与所示的代码一致，只是加粗啦线段
image.png image.png

  1.     <polygon  points="0 0 , 20 30 , 50 50 , 100 10"></polygon>

SVG文本

  1. <text x="300" y="300" style="stroke:red" >text</text>

SVG 透明度与线段样式

stroke-opacity
线段的透明度 ，线段的透明度会以中线作为分割，造成两种颜色，线的加粗，中线会在图形的边在一起，会造成中线的两种颜色
代码如下

  1.         rect {
  2.             stroke: red;
  3.             stroke-width: 10px;
  4.             stroke-opacity: 0.3;
  5.             fill-opacity: 0.3;
  6.         }
  7. <body>
  8.     <svg width="500px" height="500px" style="border: 1px solid #000;" >
  9.               <rect height='50' width="100" x="10" y="10" ry="10"></rect>
  10.     </svg>
  11. </body>

如图
image.png
fill-opacity
填充的透明度
stroke-linecap与**stroke-linejoin与canvas的线段样式一样**

SVG path元素

  1.     <svg width="500px" height="500px" style="border: 1px solid #000;" >
  2.         <path d='M 100 100 L 200 100 l 100 100 ' style="stroke: red; stroke-width: 5px; fill: transparent;"></path>
  3.     </svg>

image.png
如以上代码 属性d 里的参数区分大小写，大写为绝对位置，小写为相对位置 相对于与上一点进行移动 例如上述代码中 l (100,100) 相对与上一点 L (200,100) 进行向x轴移动100 y轴移动100 故最后连接为一条斜线
M: 就是moveTo 区分大小写 小写 ：相对与上一点移动多少距离
L : 就是lineTo 区分大小写 小写 ：相对与上一点移动多少距离
H : 水平方向移动到指定位置 区分大小写 小写 ：相对与上一点移动多少距离
V : 水平方向移动到指定位置 区分大小写 小写 ：相对与上一点移动多少距离
z : 闭合 不区分大小写
**

使用path画圆弧

三点确定一个圆形，两点可以确定两个圆形和椭圆
平面三个点如何确定一个圆形 : 连接三点形成一个三角形，再做任意两边的垂直平分线，交于一点，该点即为圆心，且到三点的距离相等
代码如下

  1. <path d='M 100 100 A 100 50 0 1 1 150 200 ' style="stroke: red; stroke-width: 5px; fill: transparent;"></path>

image.png
属性d的参数的意思为
第一与第二个参数为：**起始点坐标 M 100 100 ：moveTo （100，100）
第三与第四个参数为 ：x轴半径 y轴半径 **A 100 50
第五个参数为：**旋转角度： **0
第六与第七个参数 **1 1 如**图
图中将两个圆分成四个弧 分别为顺时针大弧，逆时针大弧，顺时针小弧，逆时针小弧
此处的两个参数 分别代**表 取大弧还是小弧 ，顺时针取弧度还是逆时针取弧度
图中 large-arc-flag = 0 or 1 **为零时取小弧 为1时取大弧 这对应第一个1也就是代码中第六个参数
sweep-flag = 0 or 1 为零时取逆时针的弧，为**1时取其顺时针的弧 这对应第二个1也就是代码中的第七个参数
IMG_20200901_234256.jpg
最后两个为终止点的坐标 ： 150 200 **

SVG渐变

  1.     <svg width="500px" height="500px" style="border: 1px solid #000000;">
  2.         <defs>
  3.             <linearGradient id="bg1" x1="0" y1="0" x2="100%" y2="100%">
  4.                 <stop offset="0%" style="stop-color: yellow;"></stop>
  5.                 <stop offset="100%" style="stop-color: green;"></stop>
  6.             </linearGradient> 
  7.         </defs>
  8.         <rect x="100" y="100" height="100" width="100" style="fill: url(#bg1);"></rect>
  9.     </svg

所有的渐变都要写到里 通过id为其图像添加渐变
image.png
SVG高斯模糊

  1.     <svg width="500px" height="500px" style="border: 1px solid #000000;">
  2.         <defs>
  3.             <!-- 渐变 -->
  4.             <linearGradient id="bg1" x1="0" y1="0" x2="100%" y2="100%">
  5.                 <stop offset="0%" style="stop-color: yellow;"></stop>
  6.                 <stop offset="100%" style="stop-color: green;"></stop>
  7.             </linearGradient> 
  8.             <!-- 滤镜 -->
  9.             <filter id="filter">
  10.                 <!-- 高斯模糊 -->
  11.                 <feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
  12.             </filter>
  13.         </defs>
  14.         <rect x="100" y="100" height="100" width="100" style="fill: url(#bg1); filter:url(#filter)"></rect>
  15.     </svg>

image.png
需要写在里 通过id进行引用
in里选的滤镜效果
image.png

SVG viewBoxs属性

viewBoxs= “x,y,width,height”
比例尺
第一对参数： 起始位置
第二对参数：画布的大小
svg会规定画布的大小，假设规定一个500*500的画布，而viewBox=”0,0,250,250”那么现在画布的width为250 height为250但是实际width与实际height还是500
代码如下

  1.     <svg width="500px" height="500px" viewBox="0,0,250,250" style="border: 1px solid #000;" >
  2.        <rect height="50" width='100' x='0' y='0' rx='10'></rect>
  3.     </svg>

效果图 没有设置viewBox的效果
image.png
没有设置viewBox的效果 如下图
image.png