摘要：如圖這種動畫是怎么實現呢直接看代碼吧這么多，是不是感覺有點懵逼。該值表示每個動畫間使用自定的貝塞爾變換曲線。該值用來具體定義動畫執行時的貝塞爾曲線。當然，里面的貝塞爾曲線組數為整個動畫幀數。

本文主要是講解關于 SVG 的一些高級動畫特效，比如 SVG 動畫標簽，圖形漸變，路徑動畫，線條動畫，SVG 裁剪等。

例如：路徑動畫

圖形漸變：

線條動畫：

以及，相關的動畫的矩陣知識，這個也是現在 CSS 動畫里面最重要，同時也是最為欠缺的知識點：

文章會先從基本語法入手，然后，慢慢深入。介紹一些動畫基本原理和對應的數學原理知識點。并且文章后面，還附有相關語法的介紹，當你在遇到不熟悉語法的時候可以參考參考。

前面一篇文章，主要介紹了一些 SVG 的基本概念和基本圖形。接下來我們需要了解一下，SVG 處理矢量這個特性之外，還有啥內容吸引我們，能讓 SVG 現在普及度這么高？

原文參考：前端小吉米

在 SVG 中，如果我們想實現一個動畫效果，可以使用 CSS，JS，或者直接使用 SVG 中自帶的 animate 元素添加動畫。

使用 CSS 的話，有兩種選擇一種是通過 style 直接內聯在里面，另外是直接使用相關的動畫屬性-- transform。

而使用 SVG 中自定的 animate 主要還是 SVG 自己的東西，比較好用。如果想用 CSS 的動畫，這都無所謂。

先看一個 SVG animate DEMO:

通過將 animate 標簽嵌套在指定的圖形里面，即可實現變換的效果。另外，還有 animateTransform，它主要是用來做變形動畫的。

簡單來說：

animate: 相當于 CSS 中的 transition

animateTransform: 相當于 CSS 中的 transform

里面一些技術細節我們這里就不過多講解了。這里，主要想介紹一下 animate 中的 morph 的效果。

該效果主要做的就是圖形內部的漸變。如圖：

這種動畫是怎么實現呢？

直接看代碼吧：

這么多，是不是感覺有點懵逼。不過，我們細分來看一下其實很簡單。里面主要是利用 animate 中的 keyTimes，calcMode，keySplines，以及 values 這幾個屬性。不急，我們一個一個來解釋一下。

keyTimes: 這其實和 CSS 中定義的 @keyframes 一樣。通過 0-1 之間的值，定義每段動畫完成的時間。格式為：value;value...。例如 0;.0625;.208333333;.3125;.395833333;.645833333;.833333333;1。從第一個動畫，到第二個動畫經歷的時間比例為 6.25%。并且，keyTimes 需要和 values 里面定義的幀數一致。

calcMode: 用來定義動畫具體的插值模型。取值有: discrete | linear[default] | paced | spline。具體可以參考 MDN。這里我們主要介紹一下 spline。該值表示每個動畫間使用自定的貝塞爾變換曲線。如果沒有特殊要求，使用 linear 其實已經足夠了，這樣就不用麻煩去定義下面的 keySplines 屬性。

keySplines：該值用來具體定義動畫執行時的 貝塞爾曲線。使用格式是通過 ; 來分隔每一個值。即，cubic-bezier(.31,.57,.93,.46) 為一組。使用 keySplines 表達，則為：keySplines = ".31,.57,.93,.46;"。當然，里面的貝塞爾曲線組數為 整個動畫幀數 - 1。

而 values 就很簡單了。它是直接結合 attributeName 屬性，來設置具體的值，每個值之間使用 ; 進行分隔。

像上面那樣，可以在指定元素里面嵌套多個 animate，既實現了形狀的改變，又實現了顏色的改變。Morph 比較常用于數字的更迭，比如，倒數 10s 的相關動畫。到這里，Morpah 相關的知識點就結束了。

接著，讓我們來看一下 SVG 中，另外一非常重要的標簽 -- animateMotion。

該標簽可以讓指定的元素，繞著指定的路徑進行運動。所以這對于復雜的路徑來說非常有用，因為我們很難使用 transform 去模擬復雜的變換路徑。看一個 DEMO

animateMotion 大致的屬性和 animate 差不多，不過，它還擁有自己特有的屬性，比如 keyPoints、rotate、path 等。不過，calcMode 在 AM(animateMotion) 中的默認屬性由，linear 變為 paced。

這些屬性，我們慢慢介紹，先從最簡單的開始吧。首先，我們來看一個 DEMO：

from，to：指定兩點的位置，位置參數是以元素的坐標為原點的。

dur：執行渲染時間

fill：指定動畫結束后停留的裝填。有 freeze 和 remove 效果。remove 表示回到動畫開始的位置，freeze 表示停留在動畫結束的位置。

如果，你想要更復雜的路徑，可以直接使用 path 屬性來指定路徑。用法和 path 標簽中 d 屬性是一樣的。

或者使用 mpath 標簽，引用外部的 path。

動畫效果為：

所以，一般而言我們在定義 AM 的路徑的時候，只用一種方式定義即可，否則會發生相應的覆蓋：mpath>path>values>from/to。

在 AM 運動中，還有一個很重要的概念就是旋轉角。默認情況下，運動物體的角度是按照它和坐標軸的初始角度確定的。例如：

這樣看起來確實有些別扭，那能不能讓物體垂直于路徑進行運動呢？

有的，根據 rotate 屬性值，一共有 3 個值可供選擇。

auto：讓物體垂直于路徑的切線方向運動。不過，如果你的路徑是閉合曲線的話，需要注意起始點的位置。

例如：

auto-reverse：讓物體垂直于路徑的切線方向并 + 180°。也就是和 auto 運動關于切線對稱。

Number：讓物體以固定的旋轉角度運動。這個就相當于使用 transform:rotate(deg) 進行控制。

在動畫設置標簽中，還有一個更簡單的--set。

該標簽也是用來模擬 transition 效果的。它和 animate 的主要區別是，它僅僅需要 to 的指定屬性，而不需要其他的參考屬性，比如 from，by 等。那它有啥特別的存在意義嗎？

有的，因為 set 針對于所有屬性，甚至包括 style 里面的相關 CSS 屬性。所以，可以靠它來很好描述一些非 number 的屬性值。

  
  All gone!

上面差不多簡單闡述了關于 SVG 一些比較有特點的動畫。當然，還有比較重要的線條動畫，這個我們放到后面進行講解。這里先來看一下所有動畫中，非常重要的矩陣原理。線性代數應該是大學里面來說，最容易學的一門科目，MD。。。還記得，大學線代期末考試的時候，100 分的同學應該說是如韭菜地般，一抓一大片（對不起，我沒能和他們同流合污。）

那矩陣是如何在動畫中使用的呢？

簡單的說，矩陣中的每個元素其實可以等價代換為每個因式里面的系數：

上面也叫作 三維矩陣。即，它涉及到 x,y,z 軸的計算。那對于我們平面 2D 變換來說，那么此時矩陣又是哪種形式呢？

很簡單，只要將 z 軸永遠置為一個常數就 OK。這里，慣例上是直接取 0 0 1 來設置。

不信的話，大家只要代進去乘以乘，應該就可以得到結果了。所以，在二維中，具體變換方式為：

后面，我們也會依據這個公式進行相關的變形操作。那矩陣變換是怎么運用到 CSS/SVG 當中呢？

在 CSS 中，是直接使用 transform 中的屬性：

transform: matrix(a,b,c,d,e,f);

當然，在 SVG 中也是一樣的：

所以，我們主要的重點就是講解一下 matrix 這個屬性。它的格式為：

matrix(a,b,c,d,e,f);

對應于我們上面的公式有：

在接觸 transform 的時候，大家應該了解到 transform 里面有很多固定的動畫屬性：

translate()

rotate()

scale()

skew()

實際上，在底層還是使用 matrix 實現的變換。就拿 translate 舉個例子吧。

translate 的格式為：

translate(dx,dy)

相當于參考當前原點，在 x/y 軸上移動 dx/dy 的距離。那么映射到矩陣，應該如何表示呢？

很簡單，它等同于：

matrix(1 0 0 1 dx dy);

使用代數證明一下：

假設有 matrix(1 0 0 1 20 30)

變為矩陣為：

根據，上面的表達式有：

X = x"*1 + y"*0 + 20 = x" + 20
Y = x"*0 + y"*0 + 30 = y" + 30

所以，就是 X 在原有 X 軸坐標上向右移動 20 的距離，Y 相對于原有移動 30 的距離。

那么其他幾個屬性呢？也是怎么變化的嗎？

恩，類似。只是里面取值不一樣：

scale(x,y): 放大 X/Y 軸，矩陣的表達為 matrix(x 0 0 y 0 0)。

rotate(θ): 坐標旋轉，矩陣的表達為 matrix(cosθ sinθ -sinθ cosθ 0 0)。

skew(θx,θy): X/Y 軸拉伸，矩陣的表達為 matrix(1 tanθx tanθy 1 0 0)。

注意，上面三個都會改變原有物體的坐標系！！！ 這點很重要，換句話說，后面每次變換都是基于前面一個的變換結果的。

詳情看圖：

詳情可以參考：MDN matrix

不過，這并不是我們使用 matrix 的重點，也不是它的優勢。它的優勢在于可計算，即，能夠將復雜的動畫集合到一個表達式中，并且，后續的變換可以直接基于當前的 matrix。

我們先來了解一下，如果多個變換動畫一起使用，matrix 應該如何表達呢？

只需要找到我們變換動畫對應的矩陣，然后相乘即可。例如，先旋轉 45°，然后放大 1.5 倍，則有變換動畫為：

transform: rotate(45deg) scale(1.5,1.5);

注意，雖然，你定義動畫是分開的，但此時的動畫是同時進行的。為啥？因為，這兩個動畫實際上可以整合成為一個變換矩陣：

并且，位置是不可以調換的。比如，transform: scale(2,2) translate(20px,30px)。即，你先放大兩倍，然后移動 20,30 的距離。注意，這里移動的 20,30 相對的是已經放大過后的坐標，相對于原坐標而言就是 40,60 了。 如果，你調換位置，即 transform: translate(20px,30px) scale(2,2)。就變成現在原坐標移動 20,30，然后再放大兩倍。

而上面強調的順序關系，實際上就可以理解為矩陣不滿足交換律的原則。因為一旦交換，結果很可能不一樣。

上面的內容只是簡單的描述了關于矩陣的概念。在實際中，矩陣可以說是真正利器。

假設現在有一個動畫，要求你將一個物體從一個點通過拋物線的方式移動到另外一個點，那么此時要求 JS/CSS 隨你挑。此時，你會不會感覺，呼吸急促，頭腦發熱呢？

恩，matrix 可以治，而且包治百病。不過，matrix 有一個限制點，它只能用于一次線性動畫表達式。即，針對于拋物線，橢圓曲線這類復雜曲線來說，不太合適。那么有什么辦法嗎？

有的，微分思想。每一段動畫其實都可以通過一定范圍內的直線拼接而成，那么這樣，我們就可以將一段拋物線拆分為由幾段線段構成的曲線。當然，如果你分的越細，擬合度就越高。這里我們不打算過度你和，我們簡單的將一段拋物線分為 5段。

如圖：

那么接下來就是摳細節。這里，依次取傾角為 45°，30°，0°，-45°，-30° 這 5 段直線。每段分配的時間比例為 20%、25%、10%、25%、20% 這主要是用于 keyframe 的設定。現在，用數學來分析一下，這個動畫到底該怎么弄。

現在，已知兩點之間的距離為 100px。那么我們同樣根據上述比例分，則有 20px, 25px, 10px, 25px, 20px。

這里我們以 45° 傾角為參考點，則終點坐標為 (20,20); 。那么，該段的矩陣為：

// 注意 Y 軸需要取負值！

 1 0 20
 0 1 -20
 0 0 1

CSS 中的變形動畫為：

transform: matrix(1,0,0,1,20,-20);

然后，第二段就為：

1 0 25
0 1 -14.4
0 0 1

使用矩陣的乘法法，則有：

 1 0 45
 0 1 -34.4
 0 0 1

變形動畫為：

transform: matrix(1,0,0,1,45,-34.4);

剩余幾段也是這樣的做法。最終，整個 keyframe 就應該表示為：

@keyframe Parabola{
    20%{
        transform: matrix(1,0,0,1,20,-20);
    }
    45%{
        transform: matrix(1,0,0,1,45,-34.4);
    }
    ...
}

整個動畫過程差不多都是這樣。當然，矩陣也不僅僅局限于這幾個動畫，憑借著高度定制化和靈活性的特點，這它還常常用于進行回彈，彈跳等動畫中。如果大家有興趣，后期也可以對這類動畫進行簡單的講解。

后面，我們最后來了解一下 SVG 中很重要的線條動畫。

SVG 中的線條動畫常常用作過渡屏（splash screen）中。例如：

或者，一些比較炫酷的 LOGO 中，比如 AllowTeam 的：

看到這些炫酷的效果，大家有沒有動心想學一學，看看自己到底能否做的這么好呢？

OK，我們現在來正式介紹一下線條動畫。在 SVG 中，最長用到的線條標簽就是 Path。這里我前面一篇文章已經做了介紹，我這里就不贅述了。

而在具體變化當中用到的是關于 stroke 的相關屬性：（下面的屬性都可以直接用在 CSS 當中！）

stroke*：定義筆觸的顏色。例如：stroke="green"

stroke-dasharray*：定義 dash 和 gap 的長度。它主要是通過使用 , 來分隔 實線 和 間隔 的值。例如：stroke-dasharray="5, 5" 表示，按照 實線為 5，間隔為 5 的排布重復下去。如下圖：

放大看有：

另外，stroke-dasharray 并不局限于只能設置兩個值，要知道，它本身的含義是設置最小重復單元，即，dash,gap,dash,gap...。比如，我定義 stroke-dasharray="15, 10, 5" 則相當于，[15,10,5] 為一段。則有：

放大看則有：

stroke-dashoffset*: 用來設置 dasharray 定義其實 dash 線條開始的位置。值可以為 number || percentage。百分數是相對于 SVG 的 viewport。通常結合 dasharray 可以實現線條的運動。

stroke-linecap: 線條的端點樣式。

stroke-linejoin: 線條連接的樣式

stroke-miterlimit: 一個比較復雜的概念，如果我們只是畫一些一般的線段，使用上面 linejoin 即可。如果涉及對邊角要求比較高的，則可以使用該屬性進行定義。它的值，其實就是角長度比上線寬：

而實際理解的話，就是假設當 width 為 1。此時比例為 2。那么 miter = 2。那么超過 2 的 miter 部分則會被 cut 掉。可以參照：

他主要是配合 linejoin 一起使用。因為 linejoin 默認取值就是 miter。所以，默認情況下就可以使用該標簽屬性。它默認值為 4。其余的大家下去實踐一下即可。詳細可以參考: miter

stroke-opacity：線段的透明度

stroke-width：線的粗細。

OK，介紹完關于 path 的所有 stroke 屬性之后，我們就要開始動手寫一下讓線條動起來的代碼。簡單來說，就是通過 stroke-dashoffset 和 stroke-dasharray 來做。整個動畫可以分為兩個過程：

通過 dasharray 將實線部分隱藏，空余為全線段長。然后，將實線部分增加至全長。比如：dasharray: 0,1000 變為 dasharray: 1000,1000。

同時，通過 dashoffset 來移動新增的實線部分，造成線段移動的效果。有: dashoffset:0，變為 dashoffset:1000。

不過，這里我們不打算使用 Path 來做啥復雜的動畫，這主要考慮到手頭沒有一些 SVG 生成工具。所以，這里我們就以 Text 來做吧（因為做起來真的簡單）。

這里，先以 IV-WEB 這段文字來做動畫。

先給大家看一下最終結果：

那么這種動畫是怎么做的呢？

這里，我主要介紹一下關于 CSS 相關，SVG 就一個 Text 我直接貼代碼了：

上面是通過創建一個居中定位的字體，然后使用 3 個 text 重疊。具體 CSS 我們下面來說一下。首先，我們營造的效果是從無到有，就需要使用 dasharray 將 gap 設置的足夠大。這里我取 300 即可。

stroke-dasharray: 0 300;

然后，通過 nth-child 選擇器，給每一個文字使用不同的顏色值：

.text:nth-child(3n + 1) {
  stroke: #F60A0A;
}
.text:nth-child(3n + 2) {
  stroke: #F2FF14;
}

.text:nth-child(3n + 3) {
  stroke: #FB9505;
}

下面才是重點內容。此時，這 3 個 text 的起始點重合。我現在既要他們在運行時不完全重合，又要他們的線條能進行滾動。不啰嗦了，直接看代碼吧：

@keyframes stroke {
  100% {
    stroke-dashoffset: 1000;
    stroke-dasharray: 80 160;
  }
}

@keyframes stroke1 {
  100% {
    stroke-dashoffset: 1080;
    stroke-dasharray: 80 160;
  }
}


@keyframes stroke2 {
  100% {
    stroke-dashoffset: 1160;
    stroke-dasharray: 80 160;
  }
}

這就是上面 3 個不同的 text 運用的動畫。dashoffet 由 0 到 1000。這完成了滾動的目的。同時，為了讓字體不重合，我還需要在對應字體的 dashoffset 上，加上不同的間隔距離。比如，第一個字體 offset 為 1000。那么第二個字體，我需要加上前一個字體 dash 的長度，即，80。所以，第二個字體就變為 1080。那么第三個就是加上前兩個的 dash 長度，即 1160。

大致過程就是這樣，詳情可以查看： IVWEB 線條動畫。

這里再給大家布置一個練習作業，如何實現無線連續的分段動畫呢？

具體效果如圖：

給點提示：

將多個文字重疊，取不同的 offset 和 array 即可。動畫的終止位置一般取一個 gap + dash 的周期長即可。

后面看看這篇文章反響如何，到時候再決定是否再寫一篇續集，介紹該作業的原理。

在 SVG 中定義文字直接使用 text 標簽即可。關于文字來說，一般而言需要注意的點就那么即可，文字的排列，間距等等。這些都可以直接使用 CSS 進行控制。不過，有幾個屬性比較特殊，這里需要額外提一下。

用來定義參考點和實際字符之間的定位關系。格式為：

text-anchor: start | middle | end | inherit

直接看代碼解釋吧：

    A

    A

    A

第一個 A，參考的是 (60,40) 的點，定義為 start ，那么參考點應該在字符的前面。

而剩下兩個也是同樣的道理：

現在，假如我們想在 text 里面添加一些特殊的字符效果，比如斜體，加粗等。由于，text 標簽不能實現嵌套，所以，為了解決這個痛點，提出了 tspan 的標簽。它其實就是一個可以嵌套的 text 標簽。

  Switch among
  italic, normal,
  and bold text.

tspan 里面同樣可以自定義相關的自身屬性。詳細的可以參考 tspan 我這里就不詳述了。

Text 一般可以橫放，豎放。那有沒有啥辦法讓文字可以按照一定的路徑任意排放呢？

有的，這里可以使用 textPath 標簽，來定義具體參考路徑。

    
    Making a quick turn
    

如圖：

具體細節我這里就不多說了。

在 DOM 中如果想展示一個圖片的部分，或者以某種形狀展示圖片的部分，一般是通過一個 cover div 來實現的。不過，如果涉及到不規則圖形的話，那么 DOM 就有天生缺陷了（當然使用 CSS 里的 clip-path 可以完成，不過兼容性不太好）。而在 SVG 中，提供了 clipPath 標簽，能夠讓我們自定義裁剪圖片的范圍和形狀。

clipPath 里面可以接任何圖形，比如，path,rect 甚至是 text。使用的時候，直接在 style 中，指定 clip-path 即可，或者直接使用 clip-path 屬性指定。

  
    
CLIP
    
  
 
 
 
  
   

或者說，如果我們想畫一個圓的裁剪區域的話：

分組標簽應該毫無意外排第一，因為其實作為繪制圖形中最常和最基本的標簽。前面一篇文章也主要介紹過了，這里做點補充。

每一個分組標簽都帶有 id 屬性，唯一標識該分組，為什么呢？

因為，后面我們可以使用該 id 標簽添加動畫，重用該分組等。

每個分組里面可以含有一些描述標簽，比如 desc。 這些描述內容是不會被渲染的。

    Just Demo
     
   

該標簽就是結合 g 標簽一起使用，作用是可以復用 g 分組的樣式。

里面使用 xlink:href 加上指定 group 的 id，然后通過 x，y 屬性指定副本放置的位置。不過，有一個限制，use 標簽的 style 屬性，并不能覆蓋點原始的 group style 樣式。而且，有時候，我們只是想使用一些模板，即，圖形并未被解析，只有代碼存在。這時候，就需要使用 defs 來包裹了。

用來保存一些代碼，使其不會被瀏覽器解析。并且里面的分組可以被 use 屬性的 style 樣式所覆蓋。

該標簽和 g 標簽類似，也是用來進行分組。不過，它有個特點，即，不會被瀏覽器所渲染。那它不和 defs 差不多嗎？

恩，確實。不過，defs 是官方推薦，用來包裹一些模板 svg 代碼而創造出來，用來增加可讀性的標簽。而 symbol 是存粹的作為一個模板。它可以獨立于 svg 的 viewbox 來自定義子 viewbox 和 preserveAspectRatio。

同樣使用該模板，也是使用 use 標簽來完成。

既然 use 可以重用 SVG 代碼，那么 SVG 里面能不能重用已經畫好的 png/jpg 的圖片呢？

這時候，就需要用到 image 標簽。其可以用來加載外部的 PNG, JPEG 圖片，注意，官方規定是前兩種，其它圖片支持不支持官方沒做答復。即，如果你使用 GIF 圖片，并不能保證所有的瀏覽器都能正常顯示。

同樣，該 image 標簽也具有自定義 preserveAspectRatio 的效果。

x: 定義水平位置

y: 定義垂直位置

width: 圖片渲染的寬度，必須有。

height: 圖片渲染的高度，必須有。

preserveAspectRatio: 控制圖片的縮放

marker 一般是用來畫箭頭或者線段始末的標識圖形。

如圖:

這里我們只需要里了解即可，因為在實際畫的時候，直接使用相關工具生成更加方便。

這里的 a 標簽和我們直接在 HTML 使用的超鏈接 a 標簽類似。也是用來定義一個外鏈的。

    
    SVG on MDN
  

更多內容，可以關注我的公眾號：前端小吉米。

分享吉米的前端路，后面也會定期推出當前熱門的前端技術~ 比如，直播，VR