svg高階應用及動畫

canvas 和 webgl 這兩項圖形技術結合 css3 可以說能完成絕大部分的動畫和需求。但 canvas 和 webgl 畢竟是偏向底層的繪製引擎，某些場景使用起來還是過於繁瑣的，不分場合一律使用錘子解決的行為不值得提倡。svg 在解決排版，圖示，相關動畫還是非常高效的，而且 svg 還是向量圖形，高畫質還原各種螢幕尺寸的設計簡直就是神器。

svg 基礎知識不再講解，結合svg特點和應用場景，主要介紹如下幾方面的內容

svg sprite 之於 font-face 的優勢就是向量圖的抗鋸齒效果，再也不需要為適配高清屏而操心。使用方式就是 svg 標籤結合 symbol元素即可，其中 svg 是容器，而symbol 則是元件模板。怎麼把svg元件顯示出來呢？使用 use 元素指向元件的id即可，如下所示：

當然網上有很多任務具可以幫我們把圖示自動sprite，比如：iconfot，gulp-svg-symbols

svg 新增到網頁中有多種方法，最常見的是：

在 html 中內聯

object、 iframe 或 embed 標籤插入

img 標籤

css background-image 屬性

html 內聯方式

使用 object、iframe 或 embed 標籤插入

使用img標籤插入

現在重點介紹一下使用 css background屬性插入的方式；既可以使用路徑也可以使用 base64 格式的data uri 方式

.svg-bg .svg-background

我認為使用 background base64 引入svg是最具靈活性的一種方式，還可以加入svg動畫，不需要額外載入圖示，只需引入css即可。同時跟普通相比它又有著抗鋸齒的優勢，因此元素尺寸隨意調整不擔心失真。比如下面使用background data uri 引入的載入動畫css：

svg 除了繪製圖形，插入文字也是很方便的，方式也簡單，使用 text 元素包裹文字內容即可

i love svg

還有一種很實用的效果就是文字路徑，也就是文字按照定義好的 path 進行排列顯示，這需要使用到另乙個標籤 textpath。實現方式：首先定義乙個path元素（這裡使用三次貝塞爾曲線），然後 textpath元素使用 xlink:href 屬性引入path，最後再用 text標籤包裹。

文字路徑 i love svg i love svg i love svg

這裡只介紹路徑動畫，基礎動畫和變換動畫與css動畫相似，就不再介紹。來看乙個基於 css3 的 animation 實現百分比載入的動畫。這裡用到了兩個關鍵屬性：

首先需要通過js獲取路徑的總長度

//獲取路徑長度
const arc = document.getelementbyid('circle');
console.log(arc.gettotallength());

接著編寫svg相關

當然其他stroke線條動畫也類似

接著我們再基於svg animatemotion標籤來實現path路徑動畫，其中path是運動路徑，dur 是持續時間，repeatcount設定是否迴圈

路徑動畫

使用svg實現路徑動畫真是價效比超高。

svg高階應用及動畫

svg波浪動畫

SVG動畫之描邊動畫

Web動畫 SVG 線條動畫入門

svg高階應用及動畫

svg波浪動畫

SVG動畫之描邊動畫

Web動畫 SVG 線條動畫入門

相關推薦