SVG 動畫

SVG 動畫

主要內容

• SVG 是什麼?
• SVG 的一些經常使用用途
• SVG 的基本結構

• CSS 結合 SVG 生成動畫

  • 圓環動畫
  • logo 描邊動畫
• SVG 的動畫元素

SVG 是什麼？

SVG ，可縮放矢量圖形（Scalable Vector Graphics），是一種用來描述二維矢量圖形的 XML 標記語言。 簡單地說，SVG 面向圖形，HTML 面向文本。

SVG 特色

1. SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
2. SVG 是矢量的，可伸縮的，適用多種分辨率。
3. SVG 是開放的標準，本質是純粹的 XML ，能夠被很是多的工具讀取和修改。
4. SVG 圖像中的文本是可選的，同時也是可搜索的。

SVG 兼容性

IE9+，主流環境基本都能支持。具體參見

SVG 的一些經常使用用途

• 製做iconfont

• 做爲圖片文件
  img src屬性引用，css background-image引用。

  SVG做爲圖像引用時，大多數瀏覽器不會加載SVG自身引用的文件(其餘圖像，外部腳本，字體文件等)，依據瀏覽器的安全策略，SVG中定義的腳本也可能不會執行。

• 做爲應用程序
  SVG文件也能夠做爲<object>元素的data屬性引入HTML中。注意，MIME type必須是image/svg+xml。

  <object data="image.svg" type="image/svg+xml">
    ...
  </object>

• 混合文檔
  能夠直接將<svg>嵌入到XHTML或者HTML5文檔中。
  嵌入到XHTML須要爲<svg>指定命名空間（xmlns），嵌入到HTML5則能夠省略，解析器會自動識別<svg>。
  在 HTML 內容中應用 SVG 效果

SVG 的基本結構

SVG 跟標籤

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1024px" height="1024px">
</svg>

SVG 基本形狀

1. 矩形（rect）

<rect x="60" y="10" rx="20" ry="40" width="100" height="100"/>

2. 圓形（circle）

<circle cx="75" cy="75" r="60"/>

3. 橢圓（ellipse）

<ellipse cx="75" cy="75" rx="30" ry="20"/>

4. 線條（line）

<line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="3"/>

5. 折線（polyline）

<polyline points="60 60, 70 120, 80 130, 70 70" style="fill: none;stroke-width: 2;stroke: black;"/>

6. 多邊形（polygon）

polygon和折線很像，它們都是由鏈接一組點集的直線構成。不一樣的是，polygon的路徑在最後一個點處自動回到第一個點。

<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180" style="fill: none;stroke: black;"/>

7. 路徑（point）

<path d="M 20 230 Q 40 205, 50 230 T 90230" style="fill: none;stroke: black"/>

路徑繪製命令

SVG經常使用元素還有<g>組合，經常使用屬性fill填充，stroke線條顏色，stroke-width線條粗細等等，具體參考MDN文檔。
SVG 元素參考
SVG 屬性參考

CSS 結合 SVG 屬性生成動畫

stroke-dasharray可控制用來描邊的點劃線的圖案範式。
stroke-dashoffset 屬性指定了dash模式到路徑開始的距離

圓環動畫

畫圓環的動畫效果，可用於提示加載百分比，倒計時等場景。
https://codepen.io/wishingtre...

logo 描邊動畫

logo描邊動畫
logo描邊動畫2][7]

SVG 的動畫元素

兼容性：ie死都不支持，移動端友好。 具體參見

1.set

set元素不能產生動畫效果，能夠實現基本的延遲功能。就是指：能夠在特定時間以後修改某個屬性值（包括自己的XML屬性和CSS屬性值）。

2.animate

attributeName 變更的屬性的屬性名。
from 變更的初始值。
to 變更的終值。
dur 動畫的持續時間。
舉個栗子
形狀補間動畫

3.animateTransform

attributeName固定爲transform，可針對transform的相關屬性生成動畫，不詳細介紹了。

4.animateMotion（線性路徑動畫）

animateMotion 元素能夠讓SVG各類圖形沿着特定的path路徑運動。
地球圍繞太陽旋轉
貼合路徑弧度運動

SVG動畫庫：
1.SVG-Morpheus
使用參考
演示參考
2.snap.svg