【SVG入门知识】

前言：
SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图。顾名思义，这种格式的图像是不会失真的，它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。所以很多渲染图像的都会基于SVG去渲染，大家熟悉的像echarts，它默认是基于canvas进行渲染的，但是我们可以选择按照SVG进行渲染，这样的图像在放大的时候就不会失真。废话不多说，且听下面讲解。
SVG标签

SVG 代码都放在顶层标签

<svg width="100%" height="100%">
   <circle id="circle" cx="50" cy="50" r="50" />
</svg>

width 和 height 属性可设置此 SVG 文档的宽度和高度。如果不指定这两个属性，SVG 图像默认大小是300像素（宽） x 150像素（高）。如果想对SVG图像进行裁剪，就要指定viewBox属性。属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度。

SVG Shapes
SVG有一些预定义的形状元素，可被开发者使用和操作：

矩形
圆形
椭圆
线
折线
多边形
路径
矩形

<svg width="300" height="180">
   <rect width="300" height="100" x="0" y="0" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);stroke: #70d5dd" />
</svg>

rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
stroke-width 属性定义矩形边框的宽度
stroke 属性定义矩形边框的颜色
x 属性定义矩形的左侧位置
y 属性定义矩形的顶端位置
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
圆形

<svg width="300" height="180">
   <circle cx="150" cy="50" r="25" class="fancy" />
</svg>

标签的cx、cy、r属性分别为横坐标、纵坐标和半径，单位为像素。坐标都是相对于

椭圆

<svg  width="300" height="180"> 
   <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/> 
</svg>

CX属性定义的椭圆中心的x坐标
CY属性定义的椭圆中心的y坐标
RX属性定义的水平半径
RY属性定义的垂直半径
直线

<svg  width="300" height="180">
   <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

标签的x1属性和y1属性，表示线段起点的横坐标和纵坐标；x2属性和y2属性，表示线段终点的横坐标和纵坐标；style属性表示线段的样式

折线

<svg width="300" height="180">
   <polyline points="3,3 30,28 3,53" fill="none" stroke="black" />
</svg>

points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔

多边形。
标签用来创建含有不少于三个边的图形。 多边形是由直线组成，其形状是"封闭"的（所有的线条 连接起来）。

<svg height="210" width="500"> 
   <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/> 
</svg>

points 属性定义多边形每个角的 x 和 y 坐标

路径

<svg>
   <path d="M150,0 L75,200 L225,200" />
</svg>

定义一个路径。
下面的命令可用于路径数据：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
绘制文本。

<svg width="300" height="180">
   <text x="50" y="25">Hello World</text>
</svg>

的x属性和y属性，表示文本区块基线（baseline）起点的横坐标和纵坐标。文字的样式可以用class或style属性指定。

复制一个形状。

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
   <circle id="myCircle" cx="5" cy="5" r="4"/>
   <use href="#myCircle" x="10" y="0" fill="blue" />
   <use href="#myCircle" x="20" y="0" fill="white" stroke="blue" />
</svg>

的href属性指定所要复制的节点，x属性和y属性是 左上角的坐标。另外，还可以指定width和height坐标。

多个形状组成一个组（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>

自定义形状
它内部的代码不会显示

<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>

自定义一个形状
该形状可以被引用来平铺一个区域

<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>

当然svg还有很多其他的知识点，比如animate、image、滤镜、模糊、阴影…等等