SVG入门

• SVG简介
• SVG画线与矩形
• SVG画圆、椭圆、折线
• SVG画多边形和文本
• SVG透明度与线条样式
• SVG的Path标签
• SVG线性渐变、放射性渐变
• SVG高斯模糊
• SVG虚线以及简单的动画
• SVG的viewbox（比例尺）

 一、SVG简介

SVG全称Scalable Vector Graphics，意为可缩放的矢量图，SVG使用XML格式定义图像。IE9及以上，Chrome，Opera，Safari，Firefor都兼容。

IE8和早期版本需要插件支持，如Adobe SVG浏览器。

SVG与Canvas的区别：

　　SVG：矢量图，不会失真，适合大面积的贴图，通常动画较少的或者简单的图标；SVG使用标签和CSS实现绘制。

　　Canvas：适合用于小面积的绘图，适合动画；Canvas使用标签和javascript实现绘制。

参考手册：https://www.runoob.com/svg/svg-reference.html

 二、SVG画线与矩形

• <line x1="" y1="" x2="" y2="">：用来创建直线
• 属性：
• (x1，y1)：表示直线的起始点
• (x2，y2)：表示直线的结束点
• 样式（css）：
• stroke:设置直线的颜色
• stroke-设置直线的粗细；如果设置为0px，画布上不会渲染直线，但html结构中依然会存在该元素

<style>
    line{
    　　stroke: black;
    　　stroke- 5px;
    }
</style>
<svg width="500" height="500" style="border:1px solid;">
    <line x1="100" y1="100" x2="200" y2="100"></line>
</svg>

• <rect height="" width="" x="" y="" rx="" yx="">：用来创建矩形
• 属性：
• height:矩形的高度
• 矩形的宽度
• (x，y)：设置矩形的起始点（左上角）
• (rx,ry)：设置横坐标方向和纵坐标方向的圆角
• 样式：
• fill：设置背景颜色，如果不需要填充背景颜色的话设置为透明（transparent）
• stroke-width：设置边框宽度
• stroke：设置矩形边框的颜色（如果设置了背景透明，不设置边框颜色会看不到矩形）

<style>
    rect{
    　　fill: transparent;//设置背景透明
    　　stroke: red;//设置边框为红色
    }
</style>
<svg width="500" height="500" style="border:1px solid;">
    <rect height="50" width="100" x="100" y="100" rx="5" ry="5"></rect>
</svg>

 三、SVG画圆、椭圆、折线

• <circle r="" cx="" cy="">：用来创建圆形
• 属性：
• r：设置圆的半径
• (cx，cy)：设置圆心坐标；如果不设置的话，圆心坐标默认为（0，0）
• 样式：
• fill:设置圆的背景填充
• stroke:设置边框的颜色
• stroke-设置边框的宽度

<style>
    circle{
    　　fill: transparent;
    　　stroke: #f0f;
    　　stroke- 5px;
    }
</style>
<svg width="500" height="500" style="border:1px solid;">
    <circle r="50" cx="50" cy="220"></circle>
</svg>

• <ellipse rx="" ry="" cx="" cy="">：用来创建椭圆
• 属性：
• (cx,cy)：设置椭圆的中心坐标点
• (rx,ry)：设置椭圆的水平半径和垂直半径
• 样式：
• fill:设置圆的背景填充
• stroke:设置边框的颜色
• stroke-设置边框的宽度

<style>
    ellipse{
    　　fill: transparent;
    　　stroke: blueviolet;
    　　stroke- 3px;
    }
</style>
<svg width="500" height="500" style="border:1px solid;">
<ellipse rx="100" ry="30" cx="300" cy="200"></ellipse>
</svg>

• <polyline points="x1 y1,x2 y2,x3 y3,x4 y4...,xn yn">：用来创建折线
• 属性：
• (x y)：设置折线每个折点的坐标
• 样式：
• fill：设置值为none或者transparent取消填充
• stroke:设置折线的颜色（如果不设置颜色，不能渲染出折线）
• stroke-width：设置折线的宽度（如果宽度为0px，同样会渲染不出折线）

<style>
    polyline{
    fill:  none /* transparent */;
    stroke: blueviolet;
    stroke- 1px;
    }
</style>
<svg width="500" height="500" style="border:1px solid;">
    <polyline points="0 0,50 50,50 100,100 50"></polyline>
</svg>

 四、SVG画多边形和文本

• <polygon points="x1 y1,x2 y2,x3 y3,x4 y4...,xn yn">：用来创建多边形
• 属性：
• (x y)：设置折线每个折点的坐标
• 样式：
• fill：设置值为none或者transparent取消填充
• stroke:设置折线的颜色（如果不设置颜色，不能渲染出折线）
• stroke-width：设置折线的宽度（如果宽度为0px，同样会渲染不出折线）

注意polygon与polyline的绘制原理是一样的，唯一的区别就在于polygon绘制到最后一个点后会将结束点和起始点连接起来，形成多边形的图形。

<style>
    polygon{
    　　fill:  none /* transparent */;
    　　stroke: blueviolet;
         stroke- 1px;
    }
</style>
<svg width="500" height="500" style="border:1px solid;">
<polygon points="0 0,50 50,50 100,100 50"></polyline>
</svg>

• <text x="" y="">：用来创建文本
• 属性：
• (x y)：用来设置文本的起始位置
• 样式：
• font相关的样式能作用text元素内容
• stroke：用来设置文本颜色
• stroke-width：用来设置文本粗细

<style>
    text{
    font-size: 15px;/* 字体样式能作用text标签 */
    stroke: #faf; /* 设置文本颜色 */
    stroke- 3px; /* 设置字体粗细 */
    }
</style>
<svg width="500" height="500" style="border:1px solid;">
    <text x="300" y="50">台风韦帕再次登陆</text>
</svg>

 五、SVG透明度与线条样式

 用来设置SVG的图形的透明度和线条样式都是使用css样式来完成的，下面就来看看这些样式属性：

• stroke-opacity：设置边框的透明度
• fill-opacity：设置填充背景的透明度
• stroke-linecap：设置svg的线端样式（round：线端半圆、square：线端添加与线宽一致的方体）
• stroke-linejoin：设置svg的折角样式（round：圆角 bevel：切掉尖角 miter：默认）

//使用折线来测试这些样式
polyline{
    /* fill:  none transparent; */
    stroke: blueviolet;
    stroke- 10px; /* 如果设置了线条透明，在线的中心上会出现一条可视的中心线 */

    stroke-opacity: 0.5;/* 边框透明度 */
    fill-opacity: 0.3; /* 背景填充透明度 */
    stroke-linecap: square; /*round: 线的末端添加一个半圆;  square：线的末端添加一个线宽一致的方块 */
    stroke-linejoin: round; /*设置折线的折角样式：round:圆角  bevel:切掉尖角  miter:默认*/
}
<svg width="500" height="500" style="border:1px solid;">
    <polyline points="0 0,50 50,50 100,100 50"></polyline>
</svg>

 六、SVG的path标签

 path标签用来绘制路径，默认情况下图形会有填充，元素使用d属性来描述路径绘制规则，d属性的参数内部包含指令和参数，详细了解d属性的内部指令：

• M ：路径起始点
• L ：路径节点（区分大小写，大写表示在画布上的绝对路径，小写表示相对前面一个路径节点移动方向和距离）
• H ：水平线，表示水平方向画线（区分大小写，大写表示横向画到那个点，小写表示横向画多少距离）
• V ：垂直线，表示垂直方向画线（区分大小写，与H的规则一致）
• Z ：闭合路径，不区分大小写
• （还有其他指令后面继续介绍）

<style>
    path{
    fill: none;
    stroke: red;
    }
</style>
<svg width="500" height="500" style="border:1px solid;">
    <path d="M 100 100 L 200 100 L 200 200"></path><!--L绝对路径绘制-->
    <path d="M 100 100 l 100 0 l 200 200"></path><!--L相对路径绘制-->
    <path d="M 100 100 H 200 V 200 200"></path><!--HV绝对路径绘制-->
    <path d="M 100 100 h 200 v 200"></path><!--hv相对路径绘制-->
</svg>

• A ：椭圆弧
• 参数：
• M mx my A rx ry 旋转角度 大弧线/小弧线 顺时针/逆时针 x y
• M起始点指令，(mx,my)其实先坐标
• A取椭圆弧线的指令，（rx ry）椭圆的x轴方向半径和y轴方向的半径
• 旋转角度：图像的旋转角度
• 大弧线/小弧线：在一个平面内两点可以确定两个圆，两个圆一两点相交，会切割出两个椭圆弧形，这个参数指定取大弧线还是小弧线
• 逆时针/顺时针：以起始点为准向结束点，按照顺时针还是逆时针取椭圆弧线
• (x，y)：设置椭圆弧的结束点

path{
    fill: none;
    stroke: red;
}
<svg width="500" height="500" style="border:1px solid;">
    <path d="M 100 100 A 100 50 30 1 0 100 180"></path>
</svg>

椭圆弧的原理图：

• C：curveto
• S：平滑曲线
• Q：二次贝塞尔曲线
• T：平滑二次贝塞尔曲线

 七、线性渐变放射性渐变

7.1线性渐变

• <defs>：引用元素容器
• <linearGradient id="" x1="" y1="" x2="" y="">：创建线性渐变
• • id：渐变ID
  • x1 y1：渐变起始点
  • x2 y2：渐变结束点
• <stop>：定义关键帧
• • offset：关键帧的位置
  • style："stop-color:rgb(255,255,0)" ：设置关键帧颜色

<svg width="500" height="500" style="border:1px solid;">
    <defs>
        <linearGradient id="bg1" x1="0" y1="0" x2="100%" x2="100%">
            <stop offset="0%" style="stop-color: rgb(255,255,0)"></stop>
            <stop offset="100%" style="stop-color: rgb(255,0,0)"></stop>
        </linearGradient>
    </defs>
    <rect x="100" y="100" height="100" width="200" style="fill:url(#bg1)"></rect>
</svg>

 八、SVG高斯模糊（滤镜）

SVG滤镜参考手册：https://www.runoob.com/svg/svg-filters-intro.html

• <defs>：引用元素容器
• <filter id="">：创建滤镜
• <feGaussianBlur in="" stdDeviation="">：定义滤镜类型

基于之前的线性渐变的基础，叠加一个高斯模糊效果：

<svg width="500" height="500" style="border:1px solid;">
    <defs>
        <linearGradient id="bg1" x1="0" y1="0" x2="100%" x2="100%">
            <stop offset="0%" style="stop-color: rgb(255,255,0)"></stop>
            <stop offset="100%" style="stop-color: rgb(255,0,0)"></stop>
        </linearGradient>
        <filter id="gaussian">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur>
        </filter>
    </defs>
    <rect x="100" y="100" height="100" width="200" style="fill:url(#bg1);filter:url(#gaussian)"></rect>
</svg>

 九、SVG虚线及简单的动画

• stroke-dasharray：设置直线为虚线，参数（npx npx ...）,参数以组为单位重复以（实线、虚线...）的方式风格直线，知道完全将直线分割完。
• stroke-dashoffset：设定虚线描边偏移量（在路径开始的前面，看不到），意思就是将虚线重原位置偏移出去，超出虚线范围的不渲染，原位置偏移的部分被空置占用。

这里有一篇不错的相关博客：https://www.cnblogs.com/zmxmumu/p/6069846.html

 有了上面两个样式，加上CSS动画控制stroke-dashoffset的偏移量，就可以实现直线伸缩动画：

<style>
    .line1{
        stroke: black;
        stroke-width: 10px;

        stroke-dasharray: 200px;/*创建虚线*/
        stroke-dashoffset: 200px; /*定义虚线描边的偏移量（在路径开始的前面，看不到）*/
        animation: move 2s linear infinite alternate-reverse;
    }
    @keyframes move{
        0%{
            stroke-dashoffset: 200px;
        }
        100%{
            stroke-dashoffset: 0px;
        }
    }
</style>
<svg width="500" height="500" style="border:1px solid;">
    <line x1="100" y1="100" x2="300" y2="100" class="line1"></line>
</svg>

 十、SVG的可视窗口viewbox（比例尺）

• <svg viewBox="x,y,width,height">
• viewBox的参数：
• （x，y）设置可视区域的开始位置（可视的起始点）
• （width,height）设置可视区域的大小；基于起始点切割横向为width，纵向为height的画布内容显示出来。而显示的实际窗口时svg的元素实际窗口。

 viewBox最常见的应用场景就是web端的地图，在标题中使用了比例尺的描述也就是通常以同比例的方式修改width，height就可以实现地图的放大与缩小；修改x,y的坐标就可以实现地图的窗口移动。

<svg width="500" height="500" style="border:1px solid;" viewBox="0,0,250,250">