使用svg绘制图形，实现渐变效果以及模糊效果

一、SVG-绘制图形

 1. <svg></svg>

             类似于canvas元素，但可以使用css样式

             使用svg绘制图形，必须定义svg元素中

 2、矩形元素

   <rect x="100" y="100" width="200" height="150" fill="blue" stroke="red" stroke-width="5"> </rect>

   如果使用style属性来设置他的样式，例如设置背景颜色style="background:red"是不行的，要使用style="fill:red"

 3、 圆形元素

   <circle cx="50" cy="50" r="50"></circle>

 4、椭圆元素

        <ellipse cx="" cy="" rx="" ry="">

        cx 属性定义圆点的 x 坐标
        cy 属性定义圆点的 y 坐标
        rx 属性定义水平半径
        ry 属性定义垂直半径

 
 5、直线元素

        颜色必须得加

        <line x1="10" y1="10" x2="200" y2="200" stroke-width="10" stroke="black">


 6、 折线元素

        points - 设置起点 折点及重点，x和y用逗号分隔，多个折点用空格隔开

        会默认将折线中的区域(起点到终点)，默认提供黑色,将fill设置为canvas的颜色，将stroke设置为另一种颜色

        <polyline points="">

  5、 多边形元素
      
        不用考虑折点的显示问题
        <polygon points="">

二、SVG-渐变

1、 设置线性渐变步骤

   1）创建SVG元素

      <svg></svg>

   2）在svg里追加defs元素

      <svg>
         <defs></defs>
      </svg>

   3）在defs里追加linearGradient元素，他才是真正实现渐变的元素
      
      <svg>
         <defs>

           <linearGradient x1="" y1="" x2="" y2=""></linearGradient>

         </defs>
      </svg>

      x1、y1:起点坐标值
      x2、y2:终点坐标值

      注意： 这四个值都是百分比

   4）在linearGradient里面追加stop元素，stop元素真正设置渐变颜色

       <svg>
         <defs>
           <linearGradient>
              
              <stop offset="" stop-color="" stop-opacity="">
              <stop offset="" stop-color="">

           </linearGradient>
         </defs>
      </svg>

      offset: 值为百分比
      stop-color:设置渐变颜色
      stop-opacity:设置渐变颜色的透明度

   5）在defs下面追加<rect>,画出图形,并将上面设置的线性渐变，添加到矩形中

      使用fill属性，值为url(#渐变元素的id值)

      <rect x="0" y="0" width="400" height="400" fill="url(#def)">

2、 扇形渐变radialGradient，参考线性渐变

三 、SVG-高斯模糊效果

 <svg width="500" height="500"> 
   <defs> 
      <filter id="Gaussian_Blur">
            //fegaussianblur- 高斯模糊,stdDeviation - 设置模糊程度 
            <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
      </filter>
   </defs
   <rect x="0" y="0" width="400" height="400" filter="url(#Gaussian_Blur)">
 </svg>

 滤镜使用filter元素
 in="SourceGraphic" - 固定写法