参考：
工具：
SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。
<svg width="150" height="100" viewBox="0 0 3 2">
<rect width="1" height="2" x="0" fill="#008d46" />
<rect width="1" height="2" x="1" fill="#ffffff" />
<rect width="1" height="2" x="2" fill="#d2232c" />
</svg><img>、<object>、<embed>、<iframe>等标签插入网页。<img src="circle.svg">
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml">
<iframe id="iframe" src="icon.svg"></iframe>.logo {
background: url(icon.svg);
}<img src="data:image/svg+xml;base64,[data]">svg<svg>SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg>, 这是根元素。
| 属性 | 含义 |
|---|---|
width |
宽度，默认值为300px, 可使用百分比或像素(单位px) |
height |
高度，默认值为150px, 可使用百分比或像素(单位px) |
version |
可定义所使用的 SVG 版本 |
xmlns |
可定义 SVG 命名空间 |
viewBox |
可定义视口位置，属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度 |
例：
<svg width="100" height="100" viewBox="50 50 50 50">
<circle id="mycircle" cx="50" cy="50" r="50" />
</svg>上面代码中，SVG 图像是100像素宽 x 100像素高，viewBox属性指定视口从(50, 50)这个点开始。所以，实际看到的是右下角的四分之一圆。
注意，视口必须适配所在的空间。上面代码中，视口的大小是 50 x 50，由于 SVG 图像的大小是 100 x 100，所以视口会放大去适配 SVG 图像的大小，即放大了四倍。
如果不指定width属性和height属性，只指定viewBox属性，则相当于只给定 SVG 图像的长宽比。这时，SVG 图像的默认大小将等于所在的 HTML 元素的大小。
比之HTML，SVG允许你无缝嵌入别的svg元素。因此你可以利用内部svg元素的属性viewBox、属性width和属性height简单创建一个新的坐标系统。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<svg width="100" height="100" viewBox="0 0 50 50">
<rect width="50" height="50" />
</svg>
</svg>矩形将是指定的两倍大。
SVG 的 CSS 属性与网页元素有所不同。
fill填充色
fill-opacity填充色透明度（合法的范围是：0 - 1）
stroke描边色
stroke-width描边色宽
stroke-linecap表示描边端点表现方式。可用值有：butt, round, square, inherit.
stroke-linejoin表示描边转角的表现方式。可用值有：miter, round, bevel, inherit.
stroke-opacity笔触颜色的透明度（合法的范围是：0 - 1）
stroke-miterlimit表示描边相交（锐角）的表现方式。默认大小是4. 什么斜角转斜面的角度损耗之类的意思，值越大，损耗越小。
stroke-dasharray控制用来描边的点划线的图案范式,它是一个<length>和<percentage>数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，5,3,2等同于5,3,2,5,3,2。
stroke-dashoffset表示虚线的起始偏移。可选值为：<percentage>, <length>, inherit. 百分比值，长度值，继承。
opacity定义整个元素的透明值（合法的范围是：0 - 1）
<line><line> 标签用来创建线条。
| 属性 | 含义 |
|---|---|
| x1 | 属性在 x 轴定义线条的开始 |
| y1 | 属性在 y 轴定义线条的开始 |
| x2 | 属性在 x 轴定义线条的结束 |
| y2 | 属性在 y 轴定义线条的结束 |
<polyline><polyline> 标签用来创建仅包含直线的形状。
| 属性 | 含义 |
|---|---|
points |
指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔 |
<svg width="100" height="50">
<polyline stroke="red" fill="black" stroke-width="2" points="0,0 10,10 20,10 100,50"/>
</svg><circle>| 属性 | 含义 |
|---|---|
cx |
圆心x轴坐标 |
cy |
圆心y轴坐标 |
r |
半径 |
<svg width="100" height="50">
<circle cx="50" cy="25" r="25" />
</svg><rect>| 属性 | 含义 |
|---|---|
x |
左上角x轴坐标，默认值为0 |
y |
左上角y轴坐标，默认值为0 |
width |
宽 |
height |
高 |
rx |
圆角弧度 |
ry |
圆角弧度 |
<svg width="100" height="50">
<rect width="100" height="50" rx="10" ry="20"/>
</svg><ellipse><ellipse> 标签可用来创建椭圆。椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径，而圆的 x 和 y 半径是相同的。
| 属性 | 含义 |
|---|---|
cx |
圆心x轴坐标 |
cy |
圆心y轴坐标 |
rx |
水平半径 |
ry |
垂直半径 |
<svg width="100" height="50">
<ellipse cx="50" cy="25" rx="50" ry="25"/>
</svg><path><path> 标签用来定义路径。MDN 详解
| 属性 | 含义 |
|---|---|
d |
表示绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标。 |
支持绘制的动作包括：
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
!> 注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
<svg width="100" height="50">
<path d="M 0 0
H 10
V 10
H 20
V 20
L 0 10 0 20
C 100,0 " stroke="red"/>
</svg>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="red"
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z" />
</svg><text>| 属性 | 含义 |
|---|---|
x |
文本起始横坐标 |
y |
文本起始纵坐标 |
<text> 元素可以通过<tspan> 元素来分组成多行来显示。每个 tspan 元素可以定义自己独特的格式和位置。
!> 文字的样式可以用class或style属性指定。
<svg width="200" height="50" xmlns:xlink="https://www.w3.org/1999/xlink">
<text x="0" y="25">
<tspan>hello svg</tspan>
<tspan x="10" y="40">多行文本</tspan>
<a xlink:href="www.baidu.com" target="_blank">
<text x="0" y="15" fill="red">链接文本</text>
</a>
</text>
<circle cx="100" cy="25" r="25" fill="#ff5e5e1a" />
<text x="100" y="25" fill="red" style="dominant-baseline:middle;text-anchor:middle;">居中</text>
</svg>xmlns:xlink=""这一句引入了xlink命名空间，以支持链接元素属性定义。
xlink:href和html中的a链接类似，只是多了xlink的命名空间前缀，用来表示链接的目的地址。
<use>use元素在SVG文档内取得目标节点，并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的DOM中，然后将其粘贴到use元素的位置，很像HTML5中的克隆模板元素。因为克隆的节点是不可见的，所以当使用CSS样式化一个use元素以及它的隐藏的后代元素的时候，必须小心注意。隐藏的、克隆的DOM不能保证继承CSS属性，除非你明文设置使用CSS继承。
出于安全原因，一些浏览器可能在use元素上应用同源策略，还有可能拒绝载入xlink:href属性内的跨源URI。
| 属性 | 含义 |
|---|---|
x |
左上角横坐标 |
y |
左上角纵坐标 |
width |
区域宽 |
height |
区域高 |
xlink:href |
引入复制节点 |
<svg width="100" height="50">
<text id="useText" x="0" y="10">hello svg</text>
<use xlink:href="#useText" x="0" y="20"/>
</svg>
<polygon>| 属性 | 含义 |
|---|---|
points |
定义多边形每个角的x和y坐标, x和y用,分割，坐标之间用空格分割 |
<svg width="100" height="50">
<polygon points="50,0 0,50 100,50"/>
</svg><g><g>标签用于将多个形状组成一个组（group），方便复用和管理。
<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><defs><defs>标签用于自定义形状，它内部的代码不会显示，仅供引用。
<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><pattern><pattern>标签用于自定义一个形状，该形状可以被引用来平铺一个区域。
<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"表示
<image>| 属性 | 含义 |
|---|---|
xlink:href |
文件来源 |
width |
宽 |
height |
高 |
<svg width="100" height="100">
<image xlink:href="./_statics/images/logo.jpeg" width="50%" height="50%"/>
</svg><animate><animate>标签用于产生动画效果。
| 属性 | 含义 |
|---|---|
attributeName |
发生动画效果的属性名 |
from |
单次动画的初始值。 |
to |
单次动画的结束值。 |
dur |
单次动画的持续时间。 |
repeatCount |
动画的循环模式。 |
transform变换<animateTransform><animate>标签对CSS的transform属性不起作用，如果需要变形，就要使用<animateTransform>标签
<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>上面代码中，
transform变换translate平移<svg width="200" height="50">
<rect x="0" y="0" width="20" height="10" fill="red "/>
<rect x="0" y="0" width="20" height="10" transform="translate(10, 20)"/>
</svg>rotate旋转// angle 旋转角度，>0 顺时针
// [centerX, centerY] 旋转中心点
rotate(angle, [centerX, centerY]) <svg width="200" height="50">
<rect x="20" y="0" width="20" height="10" fill="red "/>
<rect x="20" y="0" width="20" height="10" transform="rotate(30)" fill="green"/>
<rect x="20" y="0" width="20" height="10" transform="rotate(-180, 20, 10)"/>
</svg>scale缩放// scaleX,scaleY分别表示水平垂直方向的缩放比例，如0.5表示缩小半
// 若无scaleY则，其值默认等于scaleX
scale(scaleX [, scaleY]) <svg width="200" height="50">
<rect x="20" y="0" width="20" height="10" fill="red "/>
<rect x="40" y="0" width="20" height="10" transform="scale(0.8)" fill="green"/>
<rect x="60" y="0" width="20" height="10" transform="scale(1, 2)"/>
</svg>skewX和shewY斜切skewY(angle)
skewX(angle)<svg width="200" height="50">
<rect x="20" y="0" width="20" height="40" fill="red" transform="skewY(10) skewX(10)"/>
<rect x="40" y="0" width="20" height="40" fill="green" transform="skewY(10)"/>
<rect x="60" y="0" width="20" height="40" transform="skewX(10)"/>
</svg>如果 SVG 代码直接写在 HTML 网页之中，它就成为网页 DOM 的一部分，可以直接用 DOM 操作。
<svg
id="mysvg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 800 600"
preserveAspectRatio="xMidYMid meet"
>
<circle id="mycircle" cx="400" cy="300" r="50" />
<svg>上面代码插入网页之后，就可以用 CSS 定制样式。
circle {
stroke-width: 5;
stroke: #f00;
fill: #ff0;
}
circle:hover {
stroke: #090;
fill: #fff;
}然后，可以用 JavaScript 代码操作 SVG。
var mycircle = document.getElementById('mycircle');
mycircle.addEventListener('click', function(e) {
console.log('circle clicked - enlarging');
mycircle.setAttribute('r', 60);
}, false);上面代码指定，如果点击图形，就改写circle元素的r属性。
使用<object>、<iframe>、<embed>标签插入 SVG 文件，可以获取 SVG DOM。
var svgObject = document.getElementById('object').contentDocument;
var svgIframe = document.getElementById('iframe').contentDocument;
var svgEmbed = document.getElementById('embed').getSVGDocument();!> 注意，如果使用<img>标签插入 SVG 文件，就无法获取 SVG DOM。
由于 SVG 文件就是一段 XML 文本，因此可以通过读取 XML 代码的方式，读取 SVG 源码。
<div id="svg-container">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xml:space="preserve" width="500" height="440"
>
<!-- svg code -->
</svg>
</div>使用XMLSerializer实例的serializeToString()方法，获取 SVG 元素的代码。
var svgString = new XMLSerializer()
.serializeToString(document.querySelector('svg'));首先，需要新建一个Image对象，将 SVG 图像指定到该Image对象的src属性。
var img = new Image();
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
var DOMURL = self.URL || self.webkitURL || self;
var url = DOMURL.createObjectURL(svg);
img.src = url;然后，当图像加载完成后，再将它绘制到
img.onload = function () {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
};<svg width="100" height="50">
<style>
.line {
stroke: gray;
stroke-width:2
}
</style>
<line x1="10" y1="10" x2="90" y2="10" fill="red" stroke="blue" stroke-width="1" height="5"/>
<line x1="0" y1="20" x2="90" y2="20" style="stroke:rgb(99,99,99);stroke-width:2"/>
<line x1="0" y1="30" x2="90" y2="30" class="line"/>
</svg>svg(width="100" height="100" viewBox="0 0 100 100")
defs
linearGradient(x1="1" y1="0" x2="0" y2="0" id="gradient")
stop(offset="0%" stop-color="#FCBA67")
stop(offset="25%" stop-color="#F37D44")
stop(offset="50%" stop-color="#EB4F2A")
stop(offset="75%" stop-color="#DF0902")
g
circle(cx="50", cy="50", r="47", stroke-width="5", stroke="#f0f1f5",fill="none")
circle(id="circle", cx="50", cy="50", r="47", stroke-width="5", stroke="url('#gradient')", fill="none")
circle(id="bottom-mask", cx="50", cy="50", r="47", stroke-width="7", stroke="#fff", fill="none")
circle#status-circle(ref="status-circle", cx="50", cy="50", r="33", :fill="status.color")
text#status-text(x="50", y="50", fill="#ff5e5e1a") 低危
svg
transform: rotate(-0.05deg)
margin: 20px
circle
transition: stroke-dasharray .2s
transform: rotate(-225deg)
transform-origin: 50% 50%
#status-circle
opacity: .1
#status-text
text-anchor: middle
dominant-baseline: middle
font-size: 14pxlet score = 10;
function getStatusByScore (score) {
switch (score) {
case 1:
case 2:
return {
text: '低',
color: '#FCBA67'
};
case 3:
case 4:
return {
text: '中',
color: '#F37D44'
};
case 5:
case 6:
case 7:
case 8:
return {
text: '高',
color: '#EB4F2A'
};
default:
return {
text: '超高',
color: '#DF0902'
};
}
}
let status = Object.assign({score}, getStatusByScore(score));
let eleCircles = document.getElementById('circle');
let bottomMask = document.getElementById('bottom-mask');
let statusCircle = document.getElementById('status-circle')
let statusText = document.getElementById('status-text');
let perimeter = 2 * Math.PI * 47; // 圆周总长，总弧长
// 主体弧度
eleCircles.setAttribute('stroke-dasharray', `${perimeter * 3 / 4 * score / 12} ${perimeter * 2}`);
eleCircles.setAttribute('stroke-dasharray', `${perimeter * 3 / 4 * score / 12} ${perimeter * 2}`);
statusCircle.setAttribute('fill', status.color);
statusText.innerHTML = status.text;
statusText.setAttribute('fill', status.color);
// 底部遮罩
bottomMask.setAttribute('stroke-dasharray', `${perimeter * 90 / 360} ${perimeter * 2}`);
bottomMask.setAttribute("stroke-dashoffset", - perimeter * (275 / 360));<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<style>
path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 3s linear infinite;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
</style>
<g>
<path d="m63,18.265625c-0.709835,-0.352667 -1.492264,-0.832726 -2.458332,-0.979166c-0.889034,-0.134764 -1.623737,-0.479773 -2.375,-0.854168c-0.71154,-0.354599 -1.666668,-0.166666 -2.556,-0.166666c-0.967834,0 -1.823254,-0.149794 -2.710503,0.000166c-0.852028,0.144007 -1.290005,0.907688 -1.879333,1.499834c-0.478355,0.480644 -0.858479,1.091953 -1.031498,1.936001c-0.187775,0.916021 -0.837631,1.421047 -1.284836,2.216665c-0.470245,0.836611 -0.565327,1.72154 -0.709,2.647333c-0.12711,0.819061 -0.847095,1.468651 -0.990997,2.400002c-0.12534,0.81122 -0.002342,1.784 -0.004501,2.647333c-0.002251,0.900007 -0.168613,1.818583 -0.425335,2.488665c-0.292889,0.764488 -0.415398,1.781803 -0.658665,2.678669c-0.239624,0.883434 -0.855114,1.579212 -0.916,2.485332c-0.053635,0.798199 0,1.757168 0,2.657166c0,0.747334 0.078526,1.749325 -0.035999,2.506836c-0.147064,0.972717 -0.778801,1.699379 -0.928001,2.661331c-0.105991,0.683365 0.00185,1.692245 -0.32,2.66c-0.246593,0.741478 -0.636356,1.710506 -0.695168,2.514668c-0.072952,0.997555 -0.019032,1.800003 -0.020832,2.599998c-0.002251,1.000008 -0.010445,1.811028 -0.221333,2.600334c-0.228771,0.856251 -0.54258,1.563313 -0.694668,2.767666c-0.085846,0.679783 -0.044518,1.389912 -0.250668,2.698669c-0.089432,0.567768 -0.492661,1.490543 -0.711834,2.533333c-0.165844,0.789066 -0.095901,1.800747 -0.132164,2.600002c-0.027275,0.601181 -0.294769,1.592529 -0.563999,2.399994c-0.330551,0.991379 -0.275398,1.824661 -0.646667,2.778503c-0.255962,0.657608 -0.729958,1.557426 -1,2.342834c-0.300297,0.873405 -0.545948,1.693413 -0.862667,2.477333c-0.312199,0.772736 -0.829773,1.68409 -0.911499,2.491501c-0.088863,0.87793 -0.525848,1.536232 -0.837833,2.543167c-0.228455,0.737343 -0.120274,1.700005 -0.592003,2.566666c-0.398659,0.732414 -0.537468,1.600861 -0.574665,2.400002c-0.042713,0.917641 -0.939091,1.414749 -1,2.257164c-0.065395,0.904472 -0.101006,1.557678 -0.647335,1.942833c-0.56702,0.399742 -1.087784,0.819809 -1.927332,1c-0.843204,0.180977 -1.603413,0.785072 -2.404499,1c-0.866953,0.232597 -1.376696,0.971405 -2.316334,1c-0.870764,0.026497 -1.761667,0 -2.668501,0c-0.837332,0 -1.701672,0.179207 -2.556833,-0.020836c-0.93289,-0.218231 -1.531832,-0.974663 -2.443167,-0.979164l-0.035999,-0.833336l0,-0.882668" id="svg_1" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/>
</g>
</svg>原文：https://www.cnblogs.com/fanlinqiang/p/11824841.html