svg系列：1.svg基礎知識 & 不同的svg動畫世界

時間 2019-11-06

標籤 svg 系列 1.svg 基礎知識不同動畫世界简体版

原文原文鏈接

一、 svg知識掃盲

svg簡介

SVG(Scalable Vector Graphics)，可縮放矢量圖形，具備放大縮小不失真的特性，能夠用來建立矢量圖。
SVG1.1 於 2003 年 1 月 14 日成爲 W3C 推薦標準。
SVG本質上是用XML語言描述的，因此它能夠和DOM結構同樣被CSS和JS編程控制，經過連續地改變SVG圖形屬性就能夠建立SVG動畫。
SVG可用文本編輯器編輯，也可經過Adobe Illustator等專業編輯軟件處理。

SVG文件可單獨使用，使用XML定義幷包含DTD聲明：css

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red" />
</svg>

在現代瀏覽器中，咱們能夠直接在HTML代碼中嵌入SVG代碼：html

<div class="svg-wrap">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
     <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
  </svg>
</div>

<svg>元素

即<svg>標籤，svg有三個視圖相關的屬性：jquery

viewport 即用x, y, width, height定義的頁面矩形區域
viewbox 定義用戶視野的位置和大小，如 viewBox ='20 20 100 100' 定義了起始座標爲(20, 20)，寬高爲100的矩形區域，演示地址
preserveAspectRatio 保持橫縱比，當viewport和viewbox 長寬比不一致時，該屬性能夠控制2者的對齊和裁剪狀況，演示地址

用法
<align> [<meet or slice>]
align: xMid xMin xMax 和 YMid YMin YMax 自由組合 
e.g. preserveAspectRatio  = "xMidYMid meet"

基本圖形元素

svg繪製基本圖形元素，只要明確好各個參數的含義，應該很簡單，老鐵們快速過一遍：css3

矩形，rx，ry定義圓角
<rect x="10" y="10" width="100" height="100" rx="5" ry="5" fill="yellow"></rect>
圓 cx cy 定義圓心
<circle cx="50" cy="50" r="40" fill="yellow"></circle>
橢圓 rx ry 定義長軸半徑、短軸半徑
<ellipse cx="50" cy="50" rx="40" ry="20" fill="yellow"></ellipse>
線段
<line x1="10" y1="10" x2="90" y2="90" stroke="yellow"></line>
折線 點與點之間用空格隔開
<polyline points="50,10 80,90 10,30 90,30 20,90" stroke="#fb3" fill="transparent"></polyline>
多邊形
<polygon points="50,10 80,90 10,30 90,30 20,90" stroke="#fb3" fill="transparent"></polygon>
路徑，能夠繪製上述全部圖形 d屬性定義路徑的具體形式
<path d="M10,10 C40,5 40,140 100,100" stroke="#fb3" stroke-width="4px"></path>
文字 dx dy是相對起點座標的偏移量，rotate指定單個文字的旋轉
<text x="10" y="10" dx="10" dy="10" textLength="100" rotate="20">示例文字</text>

其餘經常使用標籤元素

主要有git

<g> <defs> <symbol> <use> <clipPath> <linearGradient> 等

能夠參考這個 codepen 演示來理解。github

二、svg動畫

why svg？若是你問我爲何用svg作動畫，而不是其餘技術，那能夠告訴你如下幾點：web

svg本質上是一種圖形繪製技術，普遍用於web矢量圖繪製，適用於多數商業logo，卡通圖片製做。所以高清屏幕使用svg可避免模糊現象。（與此相關，canvas則是用來繪製點陣圖（或者說位圖），二者是相對的）
基於不規則path的動畫效果，如路徑描邊（path draw），路徑變體（path morph），沿路徑運動（path move）等，這是目前其餘技術不太容易處理的。
除了path，svg也支持漸變、裁切、遮罩等特性，在其餘技術遇到瓶頸時，不妨考慮svg。這裏是一個用到大量svg技術的網站 welikesmall，能夠參考裏面的效果實現。
輕量，且兼容性好。svg於2003年已成爲web標準，一般幾十行svg代碼就可解決特定的需求。svg在將來也有着可觀的發展前景。

SVG + SMIL 實現動畫

SMIL 動畫 Demo
基於SMIL標準，能夠直接藉助svg animate標籤實現動畫。chrome

目前SMIL動畫多數均可以用css3來代替，但要讓某個物體沿着特定路徑移動，css3就無能爲力了（除了chrome46新增的motion-path）。編程

遺憾的是，SMIL標準正逐漸衰落，並不會成爲將來世界的主流，它正逐漸被css3所代替，因此咱們只需簡單瞭解svg中的SMIL特性便可。canvas

<set>

set 元素能夠在特定時間後，瞬間修改圖形元素的某個屬性值，它不是動畫，是一種突變。

<animate>

animate元素定義在圖形元素裏面，它能夠改變圖形某一個屬性的值，須要指定起始值和結束值（from to）以及持續時間（dur）

<animateMotion>

animateMotion它能夠引用一個事先定義好的動畫路徑，用<mpath>元素引用，讓圖形按路徑定義的方式運動。

<animateTransform>

相似於css transform，它能夠改變圖形的transform屬性，e.g. rotate | translate | scale | skewX | skewY

svg + css3 或 svg + js 實現動畫

snap.svg 動畫 Demo
經過css或js修改svg圖形的屬性也可實現動畫，這種方式也是目前最經常使用的。這就涉及到其餘的知識點了，css3的transform，transition，animation等，js的setInterval和requestAnimationFrame。除了用原生代碼控制，咱們固然也能夠用業界已經成熟的動畫庫來操做屬性：

anime.js （15kb左右，github 20k star, 最輕量，推薦使用）
velocity.js (50kb左右，不依賴jq，號稱比css動畫快)
snap.svg.js (svg中的jQuery，專業操做svg，80kb左右)
GreenSock (100kb左右，動畫功能齊全，部分插件收費)

// animejs api 
var animation= anime({
  targets: '#svg-path', // 目標元素，支持css選擇器，dom，dom數組等
  opacity: '0', 要變化的屬性，這裏是opacity屬性，能夠是任何css或svg屬性
  duration: 3000,
  delay: 1000,
  easing: 'easeInOutQuart',
  loop: true,
  direction: 'reverse', // 動畫方向：逆向播放
  complete: function(anim) {
  }
});

常見的圖形屬性以下所示：