参考：
工具：
概述
SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。
- SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。如：
<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>
- 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>
- CSS 也可以使用 SVG 文件。
.logo {
background: url(icon.svg);
}
- SVG 文件还可以转为 BASE64 编码，然后作为 Data URI 写入网页。
<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 元素的大小。
SVG嵌在SVG内部
比之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
- M：移动到（moveto）,后紧跟点x坐标及y坐标，用空格分割
- L：画直线到（lineto），后紧跟点x坐标及y坐标，用空格分割，坐标必须成对存在，多个坐标用空格分割
- H：水平画直线到（horizontal lineto），后紧跟需要水平移动到的X轴坐标
- V：垂直画直线到（vertical lineto），后紧跟需要水平移动到的Y轴坐标
- C：立方贝赛尔曲线(curveto),它需要考虑两个控制点。立方贝塞尔曲线的句法是：”C c1x,c1y c2x,c2y x,y“或者”c dc1x,dc1y dc2x,dc2y dx,dy“，在这里，c1x、c1y和c2x、c2y是分别是初始点和结束点的控制点的绝对坐标。dc1x、dc1y和dc2x、dc2y都是相对于初始点，而不是相对于结束点的。dx和dy分别是向右和向下的距离
- S：平滑的贝塞尔曲线(smooth curveto),语法是”S cx,cy x,y“或者”s dcx,dcy dx,dy“，在这里(d)cx指定第二个控制点。
- Q： 二次方贝塞尔曲线(quadratic Belzier curve), 控制点的两端是相同的。二次方贝塞尔曲线的句法是”Q cx, cy x, y“或”q dcx, dcy dx, dy“。cx和cy都是控制点的绝对坐标，而dcx和dcy分别是控制点在x和y方向上的距离。
- T：二次方贝塞尔平滑曲线smooth quadratic Belzier curveto，它假定第一个控制点是从前一个控制点关于前一个点的反射，或者说如果没有前一个控制点的话它实际上就是前一个点。T的句法是”T x,y“或者”t dx,dy“，分别对应于绝对坐标和相对距离，用来创建二次方贝塞尔曲线。
- A：椭圆弧曲线路径（elliptical Arc），”A rx,ry xAxisRotate,LargeArcFlag,SweepFlag x,y“。解构它，rx和ry分别是x和y方向的半径，而LargeArcFlag的值要到是0要么是1，用来确定是要画小弧（0）还是画大弧（1）。SweepFlag也要么是0要么是1，用来确定弧是顺时针方向（1）还是逆时针方向（0）。x和y是目的地的坐标。
- Z：闭合路径（closepath）
!> 注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
<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>
JavaScript操作
DOM操作
如果 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属性。
获取 SVG DOM
使用<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 源码
由于 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'));
SVG 图像转为 Canvas 图像
首先，需要新建一个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: 14px
let 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>