[svg] svg api
SVG文件全局有效的规则是“后来居上”，越后面的元素越可见。
Content-Type: image/svg+xml
用户单位和屏幕单位的映射关系被称为用户坐标系统。
除了缩放之外，坐标系统还可以旋转、倾斜、翻转。
默认的用户坐标系统1用户像素等于设备上的1像素（但是设备上可能会自己定义1像素到底是多大）。
在定义了具体尺寸单位的SVG中，比如单位是“cm”或“in”，最终图形会以实际大小的1比1比例呈现。
SVG 形状
matrix(a, b, c, d, e, f)
style 属性用来定义 CSS 属性
opacity 属性定义整个元素的透明值（合法的范围是：0 - 1）
Clipping 用来移除在别处定义的元素的部分内容。在这里，任何半透明效果都是不行的。它只能要么显示要么不显示。
Masking 允许使用透明度和灰度值遮罩计算得的软边缘。
使用CSS
除了定义对象的属性外，也可以通过CSS来样式化填充和描边。
语法和在html里使用CSS一样，只不过要把background-color、border改成fill和stroke。
不是所有的属性都能用CSS来设置。
上色和填充的部分一般是可以用CSS来设置的，比如fill，stroke，stroke-dasharray等，
但是不包括渐变和图案，width、height，以及路径的命令等等。
fill
fill属性设置对象内部的颜色(rgb 值、颜色名或者十六进制值)。
fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
stroke
stroke属性定义一条线，文本或元素轮廓颜色。
stroke-width属性定义了一条线，文本或元素轮廓厚度。
stroke-linecap属性定义不同类型的开放路径的终结。
三种可能值：
- butt用直边结束线段，它是常规做法，线段边界90度垂直于描边的方向、贯穿它的终点。
- square的效果差不多，但是会稍微超出实际路径的范围，超出的大小由stroke-width控制。
- round表示边框的终点是圆角，圆角的半径也是由stroke-width控制的。
stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
stroke-linejoin属性，用来控制两条描边线段之间，用什么方式连接。
stroke-miterlimit
stroke-miterlimit : <miterlimit> | inherit
<miterlimit>对斜角长度与stroke-width的比率的限制。<miterlimit>的值必须是一个大于或等于1的<number>。
如果两条线交汇在一起形成一个尖角，而且属性stroke-linejoin指定了miter，斜接有可能扩展到远远超过出路径轮廓线的线宽。属性stroke-miterlimit对斜接长度和stroke-width的比率强加了一个极限。当极限到达时，交汇处由斜接变成倒角。
斜接长度（斜接的外尖角和内夹角之间的距离）与stroke-width的比率，直接跟两条线之间的角度（θ）有关，用如下方程表示：
miterLength / stroke-width = 1 / sin ( theta / 2 )
举个例子，一个极限为1.414斜接，θ小于90度的把斜接会转换成倒角，一个极限为4.0的斜接，θ小于29度的斜接会转换成倒角，一个极限为10.0的斜接，θ小于大约11.5度的斜接会转换成倒角。
stroke-dasharray
stroke-dasharray : none | <dasharray> | inherit
<dasharray>是一个<length>和<percentage>数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，5,3,2等同于5,3,2,5,3,2。
属性stroke-dasharray可控制用来描边的点划线的图案范式。
作为一个外观属性，它也可以直接用作一个CSS样式表内部的属性。
stroke-dashoffset
stroke-dashoffset : <percentage> | <length> | inherit
stroke-dashoffset 属性指定了dash模式到路径开始的距离
如果使用了一个 <百分比> 值， 那么这个值就代表了当前viewport的一个百分比。
值可以取为负值。
image
<image xlink:href="image.png" x="200" y="200" width="100" height="100"></image>
xlink:href - 图片地址
x - 图片坐上角 x 坐标
y - 图片坐上角 y 坐标
width - 图片宽度
height- 图片高度
g
可以把属性赋给一整个元素集合
用于把相关元素进行组合的容器元素
id="该组的名称"
fill="该组填充颜色"
opacity="该组不透明度"
显现属性:All
pattern
在pattern元素内部可以包含任何之前包含过的其它基本形状，
并且每个形状都可以使用任何样式样式化，包括渐变和半透明。
文本 <text>
偏移量？
dx
在字符的长度列表中移动相对最后绘制标志符号的绝对位置。
类似于子元素相对于父元素的位置
dy
在字符的长度列表中移动相对最后绘制标志符号的绝对位置。
tspan
该元素用来标记大块文本的子部分，
它必须是一个text元素或别的tspan元素的子元素。
一个典型的用法是把句子中的一个词变成粗体红色。
tref
terf元素允许引用已经定义的文本，
高效地把它复制到当前位置。
可以使用xlink:href属性，把它指向一个元素，取得其文本内容。
可以独立于源样式化它、修改它的外观。
textPath
该元素利用它的xlink:href属性取得一个任意路径，
把字符对齐到路径，于是字体会环绕路径、顺着路径走。
text-anchor
start | middle | end | inherit
下列每个属性可以被设置为一个SVG属性或者成为一个CSS声明：
font-family、font-style、font-weight、font-variant、font-stretch、
font-size、font-size-adjust、kerning、letter-spacing、word-spacing和text-decoration。
矩形 <rect>
rect 元素的 width 和 height 属性可定义矩形的高度和宽度
x
矩形左上角的x位置
y
矩形左上角的y位置
width
矩形的宽度
height
矩形的高度
rx
圆角的x方位的半径
ry
圆角的y方位的半径
圆形 <circle>
cx 和 cy 属性定义圆点的 x 和 y 坐标。
如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
r 属性定义圆的半径。
椭圆 <ellipse>
cx 属性定义圆点的 x 坐标
cy 属性定义圆点的 y 坐标
rx 属性定义水平半径
ry 属性定义垂直半径
线 <line>
x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束
折线 <polyline>
点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。
每个点必须包含2个数字，一个是x坐标，一个是y坐标。
所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。
多边形 <polygon>
points 属性定义多边形每个角的 x 和 y 坐标
点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。
每个点必须包含2个数字，一个是x坐标，一个是y坐标。
所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。
polygon和折线很像，它们都是由连接一组点集的直线构成。
不同的是，polygon的路径在最后一个点处自动回到第一个点。
路径 <path>
大写表示绝对定位，小写表示相对定位。
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
Moveto
M x,y x和y是绝对坐标，分别代表水平坐标和垂直坐标。
m dx,dy dx和dy是相对于当前点的距离，分别是向右和向下的距离。
Lineto
L x, y x和y是绝对坐标，
l dx, dy dx和dy分别是向右和向下的距离。
H x (or h dx) 水平移动,大写为绝对坐标，小写为相对坐标
V y (or v dy) 垂直移动
ClosePath
Z (or z) 闭合路径命令,Z命令不用区分大小写。
ClosePath命令将在当前路径从，从当前点到第一个点简单画一条直线。
它是最简单的命令，而且不带有任何参数。
它沿着到开始点的最短的线性路径，如果别的路径落在这路上，将可能路径相交。
Curveto
Curvto命令指定了一个贝塞尔曲线。
有两种类型的贝塞尔曲线：立方曲线和二次方曲线。
二次方贝塞尔曲线是一种特殊的立方贝塞尔曲线，在这里，控制点的两端是相同的。
二次方贝塞尔曲线的句法是
`Q cx, cy x, y`
或
`q dcx, dcy dx, dy`
cx和cy都是控制点的绝对坐标，而dcx和dcy分别是控制点在x和y方向上的距离。
(x,y)表示的是曲线的终点
三次(立方)贝赛尔曲线遵守二次方贝赛尔曲线同样的概念，但是它需要考虑两个控制点。
三次(立方)贝塞尔曲线的句法是：
`C c1x,c1y c2x,c2y x,y`
或者
`c dc1x,dc1y dc2x,dc2y dx,dy`
c1x、c1y和c2x、c2y是分别是初始点和结束点的控制点的绝对坐标。
dc1x、dc1y和dc2x、dc2y都是相对于初始点，而不是相对于结束点的。
dx和dy分别是向右和向下的距离。(所以结束点坐标为m坐标+xy)
为了连缀平滑的贝塞尔曲线，还可以使用T和S命令。
T的句法是
`T x,y`
或者
`t dx,dy`
分别对应于绝对坐标和相对距离，用来创建二次方贝塞尔曲线。
如果S命令跟在一个C命令或者另一个S命令的后面，
它的第一个控制点，就会被假设成前一个控制点的对称点。
如果S命令单独使用，前面没有C命令或者另一个S命令，
那么它的两个控制点就会被假设为同一个点。
S用来创建立方贝塞尔曲线，语法是
`S cx,cy x,y`
或者
`s dcx,dcy dx,dy`
在这里(d)cx指定第二个控制点。
Arcto
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
rx ry 分别是x轴半径和y轴半径。
x-axis-rotation 是 x轴旋转角度。
large-arc-flag 是角度大小， 决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧。
sweep-flag 是弧线方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧。
x和y 是弧线的终点坐标。
shape-rendering
指定SVG元素
auto
让浏览器自动权衡渲染速度、平滑度、精确度。
默认是倾向于精确度而非平滑度和速度。
optimizeSpeed
偏向渲染速度，浏览器会关闭反锯齿模式。（速度）
crispEdges
偏向更加清晰锐利的边缘的渲染。
浏览器在渲染的时候会关闭反锯齿模式，且会让线条的位置和宽度和显示器边缘对齐。（锐度）
geometricPrecision
偏向渲染平滑的曲线。（平滑）
滤镜
feBlend - 与图像相结合的滤镜
feColorMatrix - 用于彩色滤光片转换
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - 过滤阴影
feSpecularLighting
feTile
feTurbulence
feDistantLight - 用于照明过滤
fePointLight - 用于照明过滤
feSpotLight - 用于照明过滤
高斯模糊（Gaussian Blur）
必须在 <defs> 标签中定义 SVG 滤镜。
<filter> 标签用来定义 SVG 滤镜。
<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜.
<filter> 标签必须嵌套在 <defs> 标签内。
<defs> 标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
<filter> 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
滤镜效果是通过 <feGaussianBlur> 标签进行定义的。fe 后缀可用于所有的滤镜
<feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度
in="SourceGraphic" 这个部分定义了由整个图像创建效果
渐变
SVG 渐变必须在 <defs> 标签中进行定义。
线性渐变 <linearGradient>
线性渐变可被定义为水平、垂直或角形的渐变：
当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
<linearGradient> 标签的 id 属性可为渐变定义一个唯一的名称
fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变
<linearGradient> 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。
offset 属性用来定义渐变的开始和结束位置。
放射性渐变
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
<radialGradient> 标签的 id 属性可为渐变定义一个唯一的名称，
fill:url(#grey_blue) 属性把 ellipse 元素链接到此渐变，
cx、cy 和 r 属性定义外圈，
fx 和 fy 定义内圈
渐变的颜色范围可由两种或多种颜色组成。
每种颜色通过一个 <stop> 标签来规定。
offset 属性用来定义渐变的开始和结束位置。
<marker>
标记可以放在直线，折线，多边形和路径的顶点。
viewBox ：
坐标系的区域
refX, refY ：
在 viewBox 内的基准点，绘制时此点在直线端点上（要注意大小写）
markerUnits ：
标识大小的基准，有两个值：strokeWidth（线的宽度）和userSpaceOnUse（图形最前端的大小）
markerWidth, markerHeight ：
标识的大小
orient：
绘制方向，可设定为：auto（自动确认方向）和 角度值
id ：标识的id号
marker-start ：路径起点处
marker-mid：路径中间端点处（必须是 path 中间出现的点）
marker-end ：路径终点处
这些元素可以使用maeker属性的"maeker-start"，
"maeker-mid"和"maeker-end"，
继承默认情况下或可设置为"none"或定义的标记的URI。
您必须先定义标记，然后才可以通过其URI引用。
任何一种形状，可以把标记放在里面。
他们绘制元素时把它们附加到顶部。
markerUnits="strokeWidth'或'userSpaceOnUse"。
如果是strokeWidth"那么使用一个单位等于一个笔划宽度。
否则，标记尺度不会使用同一视图单位作为引用元素（默认为'strokeWidth'）"
refx="标记顶点连接的位置（默认为0）"
refy="标记顶点连接的位置（默认为0）"
orient="'auto'始终显示标记的角度。 "auto"将计算某个角度使得X轴一个顶点的正切值（默认为0）
markerWidth="标记的宽度（默认3）"
markerHeight="标记的高度（默认3）"
viewBox="各点"看到"这个SVG绘图区域。由空格或逗号分隔的4个值。(min x, min y, width, height)"
