SVG基本介绍
可缩放矢量图形（Scalable Vector Graphics，SVG），是一种用于描述二维的矢量图形，基于 XML 的标记语言。
-
“矢量图形”格式，要显示的形状存储为矢量或类似矢量的结构。换句话说，作为数字。不以像素为单位。
-
“可缩放”意味着观看者可以在不损失质量的情况下上下缩放SVG图像。这是可能的，因为图形被定义为数字而不是像素。向上或向下缩放SVG图像仅意味着将定义SVG形状的数字相乘或相除。
SVG 的常见元素
svg: 所有SVG图像的根元素都是svg元素，svg元素可以相互包裹。
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<svg x="10">
<rect x="10" y="10" height="100" width="100"
style="stroke:#ff0000; fill: #0000ff"/>
</svg>
<svg x="200">
<rect x="10" y="10" height="100" width="100"
style="stroke:#009900; fill: #00cc00"/>
</svg>
</svg>
line: 用来创建一条连接两个点的线。这两个点由 4 个属性构成 （x1 y1 x2 y2）
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<line x1="0" y1="10" x2="0" y2="100" style="stroke:#006600;"></line>
<line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600;"></line>
<line x1="20" y1="10" x2="100" y2="50" style="stroke:#006600;"></line>
<line x1="30" y1="10" x2="110" y2="10" style="stroke:#006600;"></line>
</svg>
rect: 用来创建矩形，基于一个角位置以及它的宽和高(x y height width)。它还可以用来创建圆角矩形(rx ry)。
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" height="50" width="50"
rx="0" ry="0"
style="stroke:#006600; fill: #00cc00"/>
<rect x="70" y="10" height="50" width="50"
rx="10" ry="10"
style="stroke:#006600; fill: #00cc00"/>
<rect x="130" y="10" height="50" width="50"
rx="25" ry="25"
style="stroke:#006600; fill: #00cc00"/>
</svg>
ellipse: 用于绘制椭圆。椭圆是高度和宽度不相等的圆。换句话说，它在x和y方向上的半径是不同的,由4个属性构成（cx cy rx ry）。
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<ellipse cx="40" cy="40" rx="30" ry="15"
style="stroke:#006600; fill:#00cc00"/>
<ellipse cx="110" cy="40" rx="30" ry="30"
style="stroke:#006600; fill:#00cc00"/>
</svg>
circle: 用来创建圆,基于一个圆心和一个半径(cy cx r)
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
</svg>
polyline: 用来创建一系列直线连接多个点,典型的一个polyline是用来创建一个开放的形状，最后一点不与第一点相连,默认的fill是黑色。
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<polyline points="10,2 60,2 35,52"
style="stroke:#006600; stroke-width: 2;
fill: #33cc33;"/>
</svg>
polygon: 一个由一组首尾相连的直线线段构成的闭合多边形形状，最后一点连接到第一点。polygon元素通常用于绘制具有多个（3个或更多）侧面/边缘的形状。
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon points="10,0 60,0 35,50"
style="stroke:green; fill:#cc3333;"/>
</svg>
defs：用于嵌入可在SVG映像内重用的定义。例如，您可以将SVG形状分组在一起，然后将其作为单个形状重复使用。在其的内容不会显示在SVG图像中。在显示它们之前，它们必须被use元素引用。
<svg width="500" height="100">
<defs>
<g id="shape">
<rect x="0" y="0" width="50" height="50" ></rect>
<circle cx="0" cy="0" r="50" ></circle>
</g>
</defs>
<use xlink:href="#shape" x="50" y="50" ></use>
<use xlink:href="#shape" x="200" y="50" ></use>
<circle cx="50"cy="50" r="5" style="fill:#0000ff;"></circle>
<circle cx="200"cy="50" r="5" style="fill:#0000ff;"></circle>
</svg>
-
g: 可以把需要组合在一起的元素编成一个分组。 -
symbol: 可重复使用的符号， 必须被use元素引用，否则不会显示symbol内的形状。
<svg width="500" height="100">
<symbol id="shape2">
<circle cx="25" cy="25" r="25" />
</symbol>
<use xlink:href="#shape2" x="50" y="25" />
</svg>
symbol元素可以具有prepareAspectRatio和viewBox属性。g不能具有这两个属性。 因此，与在defs元素内使用g元素相比，symbol元素可能是重用形状的更好方法。
SVG常见的属性
viewport和viewbox
<svg width="500" height="200">
<rect x="20" y="10" width="10" height="5"
style="stroke: #000000; fill:none;"/>
</svg>
此时 viewport的宽度和高度分别是 500px 和 200px
当加上viewbox时,viewport的大小不改变，但rect的宽高发生了变化，变成了100px 和50px
<svg width="500" height="200" viewBox="0 0 50 20" >
<rect x="20" y="10" width="10" height="5"
style="stroke: #000000; fill:none;"/>
</svg>
viewBox的前两个值（0 0）确定了左上角的点，后两个值(50 20)确定了右下角的点。此时viewport的width:500就被分成了50份，所以rect的width 变成了100,height也是如此。
- stroke 属性
- stroke-width: 笔触的宽度,就是笔尖的大小。
- stroke-linecap: 笔尖的形状。值（序列= butt，square，round）
3.stroke-linejoin: 两条线相交处如何渲染。值（序列 = miter，round，bevel）
4.stroke-dasharray + stroke-dashoffset :以虚线呈现的SVG形状的笔触.之所以称为“破折号数组”，是因为您提供了一个数字数组作为值。这些值定义破折号和空格的长度。因此，您应该提供偶数个数字,如果只写一个表示虚线的长度和虚线的间隔是相同的值。
<svg width="500" height="120">
<line x1="20" y1="20" x2="120" y2="20"
style="stroke: #000000; fill:none;
stroke-width: 6px;
stroke-dasharray: 10 5 5 5" ></line>
<line x1="20" y1="40" x2="120" y2="40"
style="stroke: #000000; fill:none;
stroke-width: 6px;
stroke-dasharray: 10 5 5 10" ></line>
</svg>
第一行以10的虚线宽度开始，然后是5像素的间距，然后是5像素的虚线，然后是5像素的另一间距。然后重复该模式。
第二行以虚线宽度10开始，然后是5像素的间距，然后是5像素的虚线，最后是10像素的间距。
stroke-dashoffset用于设置多远虚线模式启动模式。这样，您可以从中途开始划线，例如从图案中途开始，然后从那里重复图案
<svg width="500" height="120">
<line x1="20" y1="20" x2="170" y2="20"
style="stroke: #000000; fill:none;
stroke-width: 6px;
stroke-dasharray: 10 5; stroke-dashoffset: 5;
" />
</svg>
