SVG矢量图

1、SVG的特点

官方文档：https://www.runoob.com/svg/svg-tutorial.html

SVG是（scalable vector graphics）的缩写，翻译为可缩放的矢量图。值得一提的是，svg并不是HTML5的新增元素，SVG使用的是xml来描述图形，所以SVG图形也可以是独立的文件。
SVG默认为内联。 将display: block添加到它，然后margin: auto

SVG的特点：

1. 图像可伸缩，放大缩小不会影响图像质量
2. 使用xml定义，容易读取和修改
3. 和jpeg gif图像相比尺寸更小，更容易压缩
4. 可以与其他技术运行

2、SVG画画，矢量图形，通过形状坐标数字在浏览器渲染图形

text(文本)
    <text x="10" y="15">I love SVG</text>
rect(矩形)    
    <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>
circle(圆)  
    <circle cx="100" cy="50" r="100" fill='#f06'/>       //cx表示圆心横坐标，cy表示圆心纵坐标，r表示半径
ellipse(椭圆) 
    <ellipse cx="300" cy="80" rx="150" ry="100" fill='#f06'/>  cx表示圆心横坐标，cy表示圆心纵坐标，rx表示横向半径，ry表示纵向半径 
line(直线) 
    <line x1="0" y1="100" x2="100" y2="0"/>  
polyline(折线)  
    <polyline points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" fill='#f06'/>
polygon(多边形)  
    <polygon points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" fill='#f06'/>   
path(路径)路径是SVG中最强大的图形，是由一系列命令组成
    命令            名称                        参数
     M           moveto  移动到                (x y)+
     Z          closepath  关闭路径            (none)
     L           lineto  画线到                (x y)+
     H          horizontal lineto  水平线到      x+
     V          vertical lineto  垂直线到        y+
     A        elliptical arc椭圆弧             (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
     C        curveto 三次贝塞尔曲线到          (x1 y1 x2 y2 x y)+
     S     smooth curveto光滑三次贝塞尔曲线到   (x2 y2 x y)+
     Q        Bézier curveto二次贝塞尔曲线到    (x1 y1 x y)+
     <path d="M150 0 L75 200 L225 200 Z" fill="red" stroke="blue" stroke-width="10"/>

fill(填充颜色)
fill-opacity(填充透明度)
stroke(边框颜色)
stroke-width(边框宽度)
stroke-opacity(边框透明度)
stroke-dasharray(创建虚线)
transform(变换)
filter(滤镜)(url[#滤镜id)]
stroke-dasharray：通过实线虚线控制画
stroke-dashoffset：计算偏移量

3、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 xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

上下三角行

<svg width="16" height="16"  xmlns="http://www.w3.org/2000/svg">
    <path   d="M8 13L11 9H5L8 13Z" fill="#9DA8BB"></path>
    <path   d="M8 3L11 7H5L8 3Z" fill="#9DA8BB"></path>
</svg>

注：调节三角号大小可用

transform:scale(2)

斜线(上下平齐)

<svg  xmlns="http://www.w3.org/2000/svg" >
     <polygon points="0,0 20,0 80,80 60,80  " stroke="#0052D9"/>
</svg>

4、svg图怎么垂直居中