HTML5 SVG 特效示例

SVG来生成动画

**示例说明：
示例１

注意viewBox属性可以帮助你设置svg图像大小

-fill属性是否填充
-stroke为绘制，颜色#AAAAAA
-stroke-width为绘制线的粗细
-d是具体数据，这里看到的数据代表了坐标，以及折线等等，可以使用工具生成

示例２

在SVG图形中，我们只需要调整stroke-dasharray和stroke-dashoffset即可模拟出线段绘制的动画效果

-stroke-dasharray定义了生成线段长度，及其线段和线段之间的缝隙 ，这里包含两个参数
-stroke-dashoffset定义了从那个位置开始渲染生成线段
-stroke-dasharray可以看到我们生成100px的线段，并且生成10px的线段之间的缝隙
-stroke-dashoffset定义从那个位置开始绘制

示例３

使用CSS3的keyframe可以直接指定动画效果

示例4

用js完成示例3

示例5

复杂图形动画

-针对更复杂的图形，我们需要处理多个path对象
-dd

代码块

示例1：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
    <path fill="none" stroke="#AAA" stroke-width="2" d="M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215" />
</svg>

示例2：

/*CSS代码片段*/
div{
  font-size:12px;
  padding: 10px 0;
}
input{
  width: 280px;
}

/* 定义一些辅助美化css*/

/*Javascript代码片段*/

//获取本例SVG图形线段长度

$('#len').html($('path')[0].getTotalLength()); //这个方法可获取svg图形线段长度


// 添加两个处理滑块并且自动设置dashoffset和dasharray属性值方法

$('#dashoffset').on('input',function(){
   
  var current = $(this).val();
  $('path').attr('stroke-dashoffset', current);
});

$('#dasharray').on('input', function(){
   
  var current = $(this).val();
  $('path').attr('stroke-dasharray', current + ' ' + current);
});

/* 拖拽滑块，可以看到SVG图形的stroke-dashoffset和stroke-dasharray变化的效果 */

/* 
动画实现原理： 当设置stroke-dashoffset为最大值后，　再变化stroke-dashoffset值，则能够看到模拟出来的素描动画效果
*/

<svg class="gbtags" viewBox="0 0 300 125" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <path fill="none" stroke="#222" stroke-width="2" d="M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215" stroke-dasharray="100 10" stroke-dashoffset="0" />
            <h5>stroke-dasharray:</h5>
            <input type="range" id="dasharray" min="0" max="265.0744323730469" value="265.0744323730469">
            <h5>stroke-dashoffset:</h5>
            <input type="range" id="dashoffset" min="0" max="265.0744323730469" value="0">
            <!-- 注意上面的数值是本例这个素描线段的长度，通常我们可以使用js来获取需要处理的线段长度-->
            <div>素描线长度：<span id="len"></span>
            </div>
        </svg>
        <!-- 导入jQuery -->
        <script src="http://cdn.gbtags.com/jquery/1.11.1/jquery.js"></script>

示例3：

/*定义keyframe动画*/
/* 添加动画到path元素 */
.path{
  stroke-dasharray: 265.07;
  stroke-dashoffset: 265.07;
  animation: dash 3s linear infinite;  
  /* 支持chrome */
  -webkit-animation: dash 3s linear infinite;
}
@keyframes dash{

  from{
    stroke-dashoffset: 265.07; /* 这里是svg图形中素描线长度，可以使用js获取 */
  }

  to{
    stroke-dashoffset: 0;
  }

}
/* 支持chrome浏览器 */
@-webkit-keyframes dash{

  from{
    stroke-dashoffset: 265.07; /* 这里是svg图形中素描线长度，可以使用js获取 */
  }

  to{
    stroke-dashoffset: 0;
  }

}

/*Javascript代码片段*/
var len = $('path')[0].getTotalLength(); // 得到素描线长度
$('#len').html(len);

//注意，对于CSS3的keyframe来实现动画效果不需要js辅助，但我们需要知道这个素描线“长度”，使用js可以帮助我们获取

        <!--   导入需要执行动画效果的SVG，使用上节的SVG图形-->
        <svg class="gbtags" viewBox="0 0 300 125" version="1.1" xmlns="http://www.w3.org/2000/svg">

            <path class="path" fill="none" stroke="#222" stroke-width="2" d="M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215" />

        </svg>

        素描线长度：<span id="len"></span>

        <!-- 导入jQuery:这里使用jQuery只为了显示执行动画效果的svg图形素描线长度 -->
        <script src="http://cdn.gbtags.com/jquery/1.11.1/jquery.js"></script>

示例4：

/*添加body背景*/
body{
  background: #41b1e7;
}

/*定义相关Javascript*/
var current_frame, //定义当前帧
      total_frames, //定义全部帧数
      path, //定义svg中的唯一path元素
      length, //定义path所生成的素描长度
      handle; //定义javascript动画句柄
      path = document.getElementById('path'),
        length = path.getTotalLength();

//定义初始化方法
var init = function(){
   
  current_frame = 0;
  total_frames = 160;
  path.style.strokeDasharray = length + ' ' + length; //定义dasharray
  path.style.strokeDashoffset = length; //定义dashoffset
  handle = 0;
}
//定义实际的动画绘制方法
var draw = function(){
   
  var progress = current_frame/total_frames;
  if(progress>1){ //这里定义完成动画
    window.cancelAnimationFrame(handle);
  }else{
  //否则使用reqeuestAnimationFrame来生成动画
    current_frame++;
    path.style.strokeDashoffset = Math.floor(length*(1 - progress));

    handle = window.requestAnimationFrame(draw);
  }
}
//定义一个重新运行方法
var rerun = function(){
   
  init();
  draw();
}
//页面加载即运行
rerun();

<body>  
        <svg class="gbtags" width="300" height="325" viewBox="0 0 300 325" 
            version="1.1" xmlns="http://www.w3.org/2000/svg">
            <path id