1 SVG簡介
可縮放矢量圖形是基於可擴展標記語言（標準通用標記語言的子集），用於描述二維矢量圖形的一種圖形格式。它由萬維網聯盟制定，是一個開放標準。
2 SVG的特點
與其他圖像格式相比（比如 JPEG 和 GIF），使用 SVG 的優勢在於：
SVG 圖像可通過文本編輯器來創建和修改
SVG 圖像可被搜索、索引、腳本化或壓縮
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質量地打印
SVG 可在圖像質量不下降的情況下被放大
3 瀏覽器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持內聯 SVG。Internet Explorer 8或更早版本，可通過安裝Adobe SVG Viewer以支持SVG。
4 SVG 標籤
SVG 代碼以 <svg> 元素開始，包括開啓標籤 <svg> 和關閉標籤 </svg> 。這是根元素。width 和 height 屬性可設置此 SVG 文檔的寬度和高度。version 屬性可定義所使用的 SVG 版本，xmlns 屬性可定義 SVG 命名空間。
5 SVG 製作素描線動畫舉例
1）首先畫一條素描線 如圖
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox = "0 0 200 100"> <!-- fill屬性是否填充 stroke爲繪製，顏色#AAAAAA stroke-width爲繪製線的粗細 d是具體數據，這裏看到的數據代表了座標，以及折線等等，可以使用工具生成 --> <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）SVG實現素描的動畫及原理
stroke-dasharray = "100 10" stroke-dashoffset = "0"
stroke-dasharray定義了生成線段長度，及其線段和線段之間的縫隙 ，這裏包含兩個參數
stroke-dashoffset定義了從那個位置開始渲染生成線段
相關課程 SVG實現的素描動畫模擬效果及其原理
3）使用CSS3來實現素描動畫效果
/*定義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; } }
相關課程 使用CSS3實現素描動畫效果
4）使用Javascript來調節動畫效果的參數
/*定義相關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();
這裏主要定義初始化方法和動畫繪製的方法，window.requestAnimationFrame(draw);
來生成動畫。
5）我們選用極客標籤的logo，作爲原始圖片，座標參數用 Inkscape 工具生成。
當運行動畫繪製程序的時候，各條線安裝設定的方式進行繪製，我們就看到非常酷的預加載動畫了。
觀看完整效果，請訪問輕視頻課程： 使用javascript生成極客標籤Logo的素描動畫效果