什么是SVG? https://www.w3school.com.cn/svg/svg_intro.asp
svg实例汇总 https://www.runoob.com/svg/svg-examples.html
svg全称为Scalable Vector Graphics，是一种使用XML技术描述二维图形的语言，简单来说 - 矢量图(不失真)
在HTML5出现之后,将SVG内容直接定义在HTML页面中
SVG的优势
可以使用文本编辑器创建和修改，SVG可被搜索、索引等，SVG绘制的图像不失真的
-
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
-
SVG 用来定义用于网络的基于矢量的图形
-
SVG 使用 XML 格式定义图形
-
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
-
SVG 是万维网联盟的标准
-
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
与其他图像格式相比，使用 SVG 的优势在于：
-
SVG 可被非常多的工具读取和修改（比如记事本）
-
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
-
SVG 是可伸缩的
-
SVG 图像可在任何的分辨率下被高质量地打印
-
SVG 可在图像质量不下降的情况下被放大
-
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
-
SVG 可以与 Java 技术一起运行
-
SVG 是开放的标准
-
SVG 文件是纯粹的 XML
SVG 的主要竞争者是 Flash。
-
SVG与Canvas的区别
SVG不依赖于分辨率，使用DOM或绑定事件，实现大型渲染区域的应用(地图类)
Canvas依赖于分辨率，不能使用DOM或绑定事件的，运行时以图片形式出现".jpg"
设置样式
1.通过元素的属性方式
fill - 设置填充样式
fill-opacity - 设置填充透明度
stroke - 设置描边样式
stroke-width - 设置边框的宽度
2.通过style属性,使用类似于CSS属性设置方式
注意 - 不能使用CSS中的样式进行设置
transform属性，用于设置转换效果
方法有：rotate()、scale()、translate()
将SVG插入到HTML中主要有以下几种方式：
//优势：所有主要浏览器都支持，并允许使用脚本 //缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
//将 SVG 作为object对象导入
//注意，MIME type必须是*image/svg+xml*。
//可以使用CSS控制SVG的样式
//优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准
//缺点：不允许使用脚本
//将 SVG放入 iframe 中导入
//可以使用CSS控制SVG的样式
//优势：所有主要浏览器都支持，并允许使用脚本
//缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
//将 SVG 作为图像导入
//这可能是将SVG导入HTML文档的最简单的方法。将`.svg`文件把它加到一个普通``标签内。
//你需要确保你的[服务器支持`.svg`文件]，可能大多数都是支持的，但是还是查一下的好。
//SVG作为图像引用时:-------------------
//- 大多数浏览器不会加载SVG自身引用的文件(其他图像，外部脚本，字体文件等)
//- 依据浏览器的安全策略，SVG中定义的脚本也可能不会执行
///同时你也可以在CSS中把`.svg`文件作为一个[background-image]导入。
//注意要加一个备用的.png图像，以防浏览器无法显示svg。
.svg-bg {
background: url("example.png"); /* fallback */
background-image: url("example.svg");
}
//使用a标签链接到svg文件
//使用内联svg,之间在html中嵌入。
//直接嵌入的SVG会继承父文档的样式，默认情况下采用inline的方式进行显示。
svg样式：
//fill填充颜色 stroke 轮廓线颜色 stroke-width 轮廓线宽度 stroke-linecap 属性 strokelinecap属性定义不同类型的开放路径的终结：线条的两端是矩形还是圆角等
//
SVG滤镜用来增加对SVG图形的特殊效果。所有互联网的svg滤镜定义在
SVG可用的滤镜是：
-
feBlend - 与图像相结合的滤镜
-
feColorMatrix - 用于彩色滤光片转换
-
feComponentTransfer
-
feComposite
-
feConvolveMatrix
-
feDiffuseLighting
-
feDisplacementMap
-
feFlood
-
feGaussianBlur
-
feImage
-
feMerge
-
feMorphology
-
feOffset - 过滤阴影
-
feSpecularLighting
-
feTile
-
feTurbulence
-
feDistantLight - 用于照明过滤
-
fePointLight - 用于照明过滤
-
feSpotLight - 用于照明过滤
除此之外，可以在每个 SVG 元素上使用多个滤镜！
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="1000">
<rect x="30" y="30" width="300" height="100" rx="20" ry="20" style="fill:olive;stroke-width:5;stroke:red;"/>
<ellipse cx="400" cy="220" rx="100" ry="200" style="fill:pink;stroke-width:2;stroke:black;fill-opacity:0.7;stroke-opacity:0.9"/>
<circle cx="100" cy="350" r="40" stroke="black" stroke-width="2" fill="red" />
<line x1="0" y1="0" x2="100" y2="300" style="stroke-width:2;stroke:red;"/>
<polygon points="10,150 200,150 300,550" style="fill:orange;stroke:orangered;stroke-width:2;"/>
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke-width:2;stroke:blue;" />
<defs>
<linearGradient id="grad000" x1="0%" y1="0%" x2="100%" y2="0%" >
<stop offset="0%" stop-color="red" stop-opacity="0.7" />
<stop offset="100%" style="stop-color:yellow;stop-opacity:1;" />
linearGradient>
defs>
<ellipse cx="800" cy="70" rx="85" ry="55" fill="url(#grad000)" />
<defs>
<radialGradient id="grad111" fx="50%" fy="50%" cx="50%" cy="50%" r="50%" >
<stop offset="0%" style="stop-color:teal;stop-opacity:0;" />
<stop offset="100%" style="stop-color:rgb(163, 37, 163);stop-opacity:1;" />
radialGradient>
defs>
<rect x="500" y="300" width="300" height="100" fill="url(#grad111)" />
<path d="M550 0 L475 200 L625 200 Z" fill="none" stroke="red" stroke-width="5"/>
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red"
stroke-width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue"
stroke-width="5" fill="none" />
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
g>
<g font-size="30" font="sans-serif" fill="black" stroke="none"
text-anchor="middle">
<text x="100" y="350" dx="-30">Atext>
<text x="250" y="50" dy="-10">Btext>
<text x="400" y="350" dx="30">Ctext>
g>
<text x="0" y="15" fill="black" transform="rotate(30 20,40)">I love SVGtext>
<defs>
<path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
defs>
<text x="0" y="100" style="fill:blue;">
<textPath xlink:href="#path1">I love SVG I love SVGtextPath>
text>
<text x="500" y="20" style="fill:red;">Several lines:
<tspan x="500" y="45">First linetspan>
<tspan x="500" y="70">Second linetspan>
text>
<a xlink:href="https://www.baidu.com" target="_blank">
<text x="800" y="215" fill="black">I love SVGtext>
a>
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
filter>
defs>
<rect width="90" height="90" x="500" y="500" stroke="green" stroke-width="25" fill="yellow" filter="url(#f1)" />
<defs>
<filter id="ff" x="0" y="0" width="200%" height="200%" >
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offout" mode="normal" />
filter>
defs>
<rect width="90" x="800" y="450" height="90" stroke="purple" stroke-width="5" fill="yellow" filter="url(#ff)" />
<defs>
<filter id="gg" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
filter>
defs>
<rect width="90" x="800" y="650" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#gg)" />
<defs>
<filter id="kk" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
filter>
defs>
<rect width="90" x="800" y="800" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#kk)" />
<defs>
<filter id="xx" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feColorMatrix
result="matrixOut" in="offOut" type="matrix"
values="0.2 0 0 0 0
0 0.2 0 0 0
0 0 0.2 0 0
0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
filter>
defs>
<rect width="90" x="850" y="300" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#xx)" />
svg>
body>
html>
svg绘制扇形
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths
SVG绘制弧形
https://blog.csdn.net/qing_gee/article/details/51500220
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5中的SVG属性实现圆形进度条效果title>
head>
<body>
<svg width="500px" height="500px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path id="ring" fill="none" stroke="#fd30ae" />
svg>
<script>
var path = document.getElementById('ring');
var r=100;
var progress=0.6;
//将path平移到我们需要的坐标位置
ring.setAttribute('transform', 'translate('+r+','+r+')');
// 计算当前的进度对应的角度值
var degrees = progress * 360;
// 计算当前角度对应的弧度值
var rad = degrees* (Math.PI / 180);
//极坐标转换成直角坐标
var x = (Math.sin(rad) * r).toFixed(2);
var y = -(Math.cos(rad) * r).toFixed(2);
//大于180度时候画大角度弧，小于180度的画小角度弧，(deg > 180) ? 1 : 0
var lenghty = window.Number(degrees > 180);
//path 属性
var descriptions = ['M', 0, -r, 'A', r, r, 0, lenghty, 1, x, y];
// 给path 设置属性
path.setAttribute('d', descriptions.join(' '));
script>
body>
html>