前言

大家好，到了 SVG 之旅第三天，我們今天會遇到什麼樣的冒險呢？

在深入不淺出 SVG 之旅的第三天，我們將會提到 在 SVG 中如何填色與增加邊框樣式，以及講解 SVG 動畫的原理。

那就讓我們開始吧！

fill 填色 與 stroke 邊框

與 CSS 不同的是，SVG 有他專屬的上色語法。即便我們可以透過 CSS 來指定元素的樣式，但還是要視情況斟酌使用。

大多數基礎顏色我們可以使用 fill 與 stroke 來設定顏色樣式，另外還可以直接在 SVG 內定透過 fill-opacity stroke-opacity 定義顏色透明度。

fill 填色

fill 填色屬性給定了圖形元素內部的顏色。即使如此，若 SVG 內有複雜的嵌套元素，則會需要特別判斷填色範圍。

• nonzero
  此規則定義了從畫布 內部 開始，繪製點到無限遠距的射線，從零開始，每次路徑由左往右穿過射線時加一。
  計算完交叉點後，若結果為零，則該點落在路徑外部，不填充顏色；反之落在內部的路徑則會填色。
  
• evenodd
  此規則定義了從畫布 內部 開始，繪製點到無限遠距的射線給定計算形狀路徑的數量
  若該數字為奇數，則該點落在路徑內部，填充顏色；反之，若該數為偶數，則落在路徑外部，則不填充顏色。
  

stroke 邊框

stroke 邊框屬性為沿著給定圖形元素的輪廓描繪邊框。除了給予邊框顏色，我們還可以使用一些其他屬性來控制邊框樣式。

• stroke-width
  筆畫寬度，用來指定當前元素的筆觸寬度。數值0將不會繪製筆畫，數值負值則屬性無效。

• stroke-linecap
  指定筆畫路徑兩端端點形狀。
  |屬性|介紹
  |:-|:-|
  |butt|筆畫路徑不會超過路徑的兩個極端點|
  |round|筆畫路徑的兩個極端點延伸一個直徑等於筆畫寬度的半圓形|
  |square|筆畫路徑的兩個極端點延伸一個矩形擴展，該矩形寬度等於筆畫寬度，長度為筆畫寬度的一半
  

• stroke-linejoin
  指定筆畫路徑或圖形形狀轉角處的形狀。
  |屬性|介紹
  |:-|:-|
  |miter|將轉角處用銳角連接路徑，通過路徑段的切線延伸至外邊緣，若超出筆畫限制，其將會退回 bevel 狀態|
  |miter-clip|與 bevel 相同，若超過筆畫限制，則會變成平角|
  |round|透過圓角將路徑轉角處包覆起來|
  |bevel|路徑轉角處使用斜角包覆。路徑轉角的左右兩端點填充三角形，總體形狀為一個平角狀態|
  |arcs|將轉角處用圓弧尖角包覆|
  

以上，SVG 的基礎繪圖方式就先介紹到這邊，接著我們趕緊來看看 SVG 動畫到底怎麼運作的吧～

SVG 動畫共用屬性

在前面的篇章中我們有介紹到 SVG 有4種動畫模式：

• animate
• animateTransform
• CSS 動畫模式
• animateMotion

以下連來簡單介紹一下 SVG 動畫語法的共用屬性。

xlink:href

無倫在四種動畫中的哪一種，我們都必須要先指定該元素的動畫。通常我們會透過 id 來抓取要套用動畫的元素，或是直接嵌套在該元素內。

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect width="10" height="10">
    <animate attributeName="rx" values="0;5;0" dur="5s" repeatCount="indefinite" />
  </rect>
</svg>

attributeName

指定動畫的目標屬性，舉例來說：若我們要在 circle 的 X軸上設定動畫，我們可以將 cx 指定動畫名稱並針對該屬性做動畫。attributeName 只能採用一個值而不能同時指定多個目標屬性。

attributeType

定義目標屬性的名稱空間，通常名稱空間分為兩種 CSS 與 XML 格式。attributeType 預設值為 auto ，瀏覽器會先從 CSS 開始搜尋該目標屬性，若找不到再繼續往 XML 找。

SVG 動畫時間節奏屬性

SVG 動畫通常由 to、from、by、dur、fill 屬性定義動畫每一幀之間的距離與時間。

<svg width="500" height="100">
  <circle r="30" cx="50" cy="50">
    <animate 
        attributeName="cx"
        from="50"
        to="150" 
        dur="1s"
        fill="freeze" />
  </circle>
</svg>

SVG 動畫

在 SVG 中，動畫語法是由 W3.org 與 SMIL 所共同規範出來的，SMIL 動畫相較於 JavaScript 動畫的好處是若我們把 SVG 透過 background-image 語法引入時，JavaScript 動畫是無法直接對該 SVG 圖形作用的，而 SMIL 則可以在兩種情況下都有作用。

animation

就是很單純我們所熟知的那個 Aniamtion

<svg width="500" height="100">
  <circle r="30" cx="50" cy="50" fill="lightblue">
    <animate 
        attributeName="cx"
        from="50"
        to="150" 
        dur="1s"
        repeatCount="indefinite"
        fill="freeze" />
  </circle>
</svg>

set

set 提供一個設定指定時間動作的動畫模式，由於 set 是指定在特殊的時間將元素設定為某種特殊的值，所以他不接受前面一些所提到的共用屬性，比如說他並沒有 from 或 by 屬性。

<svg width="500" height="100">
  <circle r="30" cx="50" cy="50" fill="lightblue">
    <set
        attributeName="cx"
        to="150" 
        begin="2s"
        fill="freeze" />
  </circle>
</svg>

animateMotion

animateMotion 可以讓圖形沿著 path 路徑移動。我們將 path 路徑寫在 animateMotion 內，讓元素當作移動路徑當參考對象，該路徑為通過計算的 X值和 Y值沿著使用者裝置的 X軸 和 Y軸移動。

下面範例我們透過 X值 Y值設為 [0,0] 來定義元素原點座標軸(左上 origin 位置)沿著路徑移動的樣子

<svg width="500px" height="500px">
  <path d="M100 100  Q150 150 ,200 100 T300 100" stroke="black" fill="none"/>
  <rect width="20" height="20" x="0" y="0" fill="lightblue">
  <animateMotion dur="3s" path="M100 100  Q150 150 ,200 100 T300 100" repeatCount="indefinite" rotate="auto" /> 
</rect>
  </circle>
</svg>

今天的 SVG 大冒險就到這裡，大家有沒有感受到對於新語法學習的刺激與星反感呢？

由於今天是中秋連假第一天，作者我在滿滿是人的返鄉車潮上趕文章，真的是感受到了一線懸命、知識大爆炸的感覺呢！

那麼明天我們就按照慣例來手把手實作一次 SVG 動畫看看吧～

祝大家中秋節快樂！

參考資料

• W3.org - Scalable Vector Graphics (SVG):Animation
• MDN - SVG element reference
• oxxostudio - SVG 研究之路 (21) - 初探 SMIL Animation
  
• SVG 研究之路 (22) - 深入理解 SMIL Animation