svg高階應用及動畫
阿新 • • 發佈:2020-06-04
canvas 和 webGL 這兩項圖形技術結合 css3 可以說能完成絕大部分的動畫和需求。但 canvas 和 webGL 畢竟是偏向底層的繪製引擎,某些場景使用起來還是過於繁瑣的,不分場合一律使用錘子解決的行為不值得提倡。svg 在解決排版,圖示,相關動畫還是非常高效的,而且 svg 還是向量圖形,高清還原各種螢幕尺寸的設計簡直就是神器。
svg 基礎知識不再講解,結合svg特點和應用場景,主要介紹如下幾方面的內容
* svg sprite
* css background-image 插入svg
* 文字路徑
* 路徑動畫
## SVG sprite
SVG sprite 之於 font-face 的優勢就是向量圖的抗鋸齒效果,再也不需要為適配高清屏而操心。使用方式就是 svg 標籤結合 symbol元素即可,其中 svg 是容器,而symbol 則是元件模板。怎麼把svg元件顯示出來呢?使用 use 元素指向元件的id即可,如下所示:
```html
```
當然網上有很多工具可以幫我們把圖示自動sprite,比如:[iconfot](https://www.iconfont.cn/),[gulp-svg-symbols](https://github.com/Hiswe/gulp-svg-symbols)
## 在css中插入svg
SVG 新增到網頁中有多種方法,最常見的是:
1. 在 HTML 中內聯
2. `object`、 `iframe` 或 `embed` 標籤插入
3. `img` 標籤
4. CSS `background-image` 屬性
html 內聯方式
```html
```
使用 object、iframe 或 embed 標籤插入
```html
```
使用img標籤插入
```html
```
現在重點介紹一下使用 css background屬性插入的方式;既可以使用圖片路徑也可以使用 base64 格式的data URI 方式
```css
.svg-bg {
background-image: url("./bg.svg");
}
.svg-background {
background-image: url("data:image/svg+xml;");
}
```
我認為使用 background base64 引入svg是最具靈活性的一種方式,還可以加入svg動畫,不需要額外載入圖示,只需引入css即可。同時跟普通圖片相比它又有著抗鋸齒的優勢,因此元素尺寸隨意調整不擔心失真。比如下面使用background data URI 引入的載入動畫css:
```html
```
## 文字路徑
svg 除了繪製圖形,插入文字也是很方便的,方式也簡單,使用 text 元素包裹文字內容即可
```html
I Love SVG
```
還有一種很實用的效果就是文字路徑,也就是文字按照定義好的 path 進行排列顯示,這需要使用到另一個標籤 textPath。實現方式:首先定義一個path元素(這裡使用三次貝塞爾曲線),然後 textPath元素使用 xlink:href 屬性引入path,最後再用 text標籤包裹。
```html
文字路徑
I Love SVG I Love SVG I Love SVG
```
## svg路徑動畫
svg動畫既可以使用 css3 相關屬性實現,也可以使用自己獨有的api實現。svg方式主要用以下標籤:
* animate:基礎動畫元素,實現單屬性的動畫過渡效果
* animateTransform: 實現transform變換動畫效果
* animateMotion:路徑動畫效果
這裡只介紹路徑動畫,基礎動畫和變換動畫與css動畫相似,就不再介紹。來看一個基於 css3 的 animation 實現百分比載入的動畫。這裡用到了兩個關鍵屬性:
* stroke-dasharray:設定線條斷開為虛線,數值越大,線就越長
* stroke-dashoffset:設定線條的偏移,設定後,線段就會偏移相應的值,實現線條動畫只要動態改變這個偏移值就好
首先需要通過js獲取路徑的總長度
```javascript
//獲取路徑長度
const arc = document.getElementById('circle');
console.log(arc.getTotalLength()); //250.92141723632812
```
接著編寫svg相關
```html
```
當然其他stroke線條動畫也類似
接著我們再基於svg animateMotion標籤來實現path路徑動畫,其中path是運動路徑,dur 是持續時間,repeatCount設定是否迴圈
```html
路徑動畫
```
使用svg實現路徑動畫真是價效比