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

一、SVG-绘制图形

 1. 

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

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

 2、矩形元素

    

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

 3、 圆形元素

   

 4、椭圆元素

        

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

 
 5、直线元素

        颜色必须得加

        


 6、 折线元素

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

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

        

  5、 多边形元素
      
        不用考虑折点的显示问题
        

二、SVG-渐变

1、 设置线性渐变步骤

   1）创建SVG元素

      

   2）在svg里追加defs元素

      

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

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

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

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

       

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

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

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

      

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

三 、SVG-高斯模糊效果

 

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