H5-12.18SVG画图及高级应用

一、SVG - 基础

1、 什么是SVG

 1) SVG是一种使用XML技术描述二维图形的语言,svg是一种矢量图
 2) 并不属于HTML5专有内容，在HTML5出现之前，就有SVG内容，HTML5只不过提供了SVG原生的内容
 4) svg文件的扩展名为.svg

2. SVG的优势

   1）可通过文本编辑器来创建和修改
   2）可被搜索引擎搜索到
   3）SVG可在任何的分辨率下被高质量的打印
   4）可在图片质量不下降的情况下被放大
   5）支持事件绑定
   

3. SVG与canvas的区别

   SVG - 实际开发中，多用SVG
   不依赖分辨率
   支持事件处理器
   不适合游戏
   大型渲染区域的程序(例如，百度地图)

   Canvas

   依赖分辨率
   不支持事件绑定
   最适合网页游戏
   可以用图片格式保存图像
   

不管是SVG还是Canvas，在一个页面中都可以同时定义多个

4）用途

     静态绘制图形
     动态动画效果
     专门提供事件

二、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(#linear)">

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(#def)">
 </svg>


 滤镜使用filter元素

  
     in="SourceGraphic" - 固定写法

效果图

每日分享一首音乐，今天是一首很喜欢的纯音乐。供大家敲代码之余放松下自己。
http://music.163.com/#/song?id=433103084