把滑鼠 SVG 向量圖可以移到上面，移到不同的區域，就會變化不同的顏色。而這僅僅只是利用一張 SVG 和一些 CSS 就可以達成。縮放不會模糊也不會有鋸齒。
圓角矩形
圓形
橢圓
SVG 研究之路 (4) - Path 基礎篇
SVG Path 指令列表
| 指令 |
參數 |
指令說明 |
| M |
x y |
起始點的 x , y 座標 ( move to ) |
| L |
x y |
從目前點的座標畫直線到指定點的 x , y 座標 ( line to ) |
| H |
x |
從目前點的座標畫水平直線到指定的 x 軸座標 ( horizontal line to ) |
| V |
y |
從目前點的座標畫垂直線到指定的 y 軸座標 ( vertical line to ) |
| C |
x1 y1 x2 y2 x y |
從目前點的座標畫條貝茲曲線到指定點的 x, y 座標：其中 x1, y1 及 x2, y2 為控制點 ( curve ) |
| S |
x2 y2 x y |
從目前點的座標畫條反射的貝茲曲線到指定點的 x, y 座標：其中 x2, y2 為反射的控制點 ( smooth curve ) |
| Q |
x1 y1 x y |
從目前點的座標畫條二次貝茲曲線到指定點的 x, y 座標：其中 x1, y1 為控制點 ( quadratic Bézier curve ) |
| T |
x y |
從目前點的座標畫條反射二次貝茲曲線到指定點的 x, y 座標：以前一個座標為反射控制點( smooth quadratic Bézier curve ) |
| A |
rx ry x-axis-rotation large-arc-flag sweep-flag x y |
從目前點的座標畫個橢圓形到指定點的 x, y 座標：其中 rx, ry 為橢圓形的 x 軸及 y 軸的半徑，x-axis-rotation 是弧線與 x 軸的旋轉角度，large-arc-flag 則設定 1 最大角度的弧線或是 0 最小角度的弧線，sweep-flag 設定方向為 1 順時針方向或 0 逆時針方向 ( Arc ) |
| Z |
|
關閉路徑，將目前點的座標與第一個點的座標連接起來 ( closepath ) |
SVG Path 基本指令
M 也就是起始點，因此所有的 Path 一定從 M 開始，M 也只有兩個參數，x 和 y。
H 可以從目前的點畫水平線到某個 x 座標，只有一個參數。
V 可以從目前的點畫垂直線到某個 y 座標，只有一個參數。
L 可以從目前的點畫垂直線到某個座標，有兩個參數個參數 x、y。
C 表示可以畫一個如下圖所示的三次貝茲曲線。
S 可以在原本的點後方建立一個帶有貝茲曲線控制點的點，然後原本的點會以同樣的斜率鏡射一個貝茲控制點。
Q 就簡單多了，就是起點和終點的貝茲曲線共用同一個控制點，只需要有貝茲控制點的座標和終點座標即可。
T 只有一組參數 x,y ，表示終點的座標，所以 T 的前方要接上 Q 才能畫出對應的座標線。
Z 沒有參數，也是放在最後的，有加上 Z 的話，會從終點用一條線連回起點。
SVG 研究之路 (5) - Path 進階篇
| rx： | 橢圓的 x 軸半徑 ( 根據不同的終點換算成比例 ) |
| ry： | 橢圓的 y 軸半徑 ( 根據不同的終點換算成比例 ) |
| x-axis-rotation： | 弧線與 x 軸的夾角 |
| large-arc-flag： | 1 為大角度弧線，0 為小角度弧線 ( 必須有三個點 ) |
| sweep-flag： | 1 為順時針方向，0 為逆時針方向 |
| x： | 終點 x 座標 |
| y： | 終點 y 座標 |
A 指令，什麼是 A 呢？就是「弧形」 ( Arcs )，橢圓圓弧 ( Elliptical Arc )。
首先來看一個利用 A 指令畫出來的弧形：扁長型，x,y 軸半徑比例為 5:1，小角度弧線，逆時針方向。
扁長型，x,y 軸半徑比例為 5:1，小角度弧線，順時針方向。
扁長型，x,y 軸半徑比例為 5:1，大角度弧線，順時針方向 ( 因為只有兩個點，所以大小角度結果相同，返回原來的點了 )
大小角度差異。
![]()
小於 70.71 ( 加起來 60，兩條弧線重疊 )
大於 70.71 ( 加起來 80，兩條弧線分開 )
為什麼會這樣呢？主要因為小角度的弧線，是指三角形的三個內角合小於 180 度，但不代表弧線和直線的合可以變成負值，因為如果變成負值，計算起來也會變成大角度的弧線，這也是要非常注意的地方！下面這張圖是很好的說明範例：
關於 A 的指令，最難的就是上述的大角度小角度弧線，而最後一個參數，就是指弧線跟的 x 軸和畫面 x 軸的夾角，我們看以下的範例：
animate 設定兩秒內正方形會移到 x=60 的地方 ( dur="2s" )，同時無限次播放 ( repeatCount="indefinite" )。
animateMotion 讓我們的圖形，可以跟隨路徑移動。比較需要注意的是，當我們設定了 animateMotion，則圖形位置以 path 的起點 M 開始計算，也就是會把 M 當作圖形的 (0,0) 的座標，因此下面的範例將 x 設為 0，y 設為 -10。
如果沒有這樣設定，則會出現這樣的情況：
animateTransform 我們設定 type 是 scale，從 1 的比例變成 1.5 的比例。
也可以把 type 設為 rotate，就可以讓圖形旋轉
attributeName 屬性的名稱，顧名思義就是當你設定了這個屬性，就會以這個屬性去進行動畫。
attributeType ( auto | CSS | XML ) 屬性的類別，預設值為 auto，如果明確知道該屬性是 CSS 還是 XML ，就可以直接在這邊下定義，不過其實使用自動就好，因為會自動先去 CSS 的屬性找，找不到再去 XML 的屬性找，原則上來說應該都不會有問題。
![]()
動畫影格屬性
calcMode ( discrete | linear | paced | spline ) 指定動畫的進行速度模式，預設為 linear，也就是以同樣速度進行變化，如果遇到不支援的，則直接使用 discrete 的模式，直接跳到下一個狀態 ( from 直接跳到 to )，至於 paced ，則與 linear 相同，平均分配速度，不過就不能使用後面的 keyTimes 和 keySplines ，而 spline 就一定得用 keyTimes 和 keySplines 來配合運作。
values (values 是一連串的值，中間使用「分號」隔開，也就是 from 到 to 之間的值，例如從 from="0" to="10" 進行了 10 秒，我們加上 value="0,2,10"，則 0-2 會跑五秒，2-10 會跑五秒。)
keyTimes (就是指動畫的時間。keyTimes 為 0-1 之間的浮點數。keytimes 後面的值一定要大於前面的值。)
keySplines 只能限定在 0-1 之間的範圍，而且必須與 keyTimes 一同使用，一個值裡面有四個數字，以分號隔開，比 keyTimes 少一個值，我們可由下圖看到藉由控制 keySplines，可以達到讓動畫加減速的效果。( 別忘記還要在 calcMode="spline" 的情形下使用)
from 動畫起始時的屬性數值
to 動畫結束時的屬性數值
by 動畫相對於起始的屬性數值
動畫時間屬性
begin
id.end; id.begin 指定某個 id 的動畫結束之後再開始，還可以提早或延遲時間開始，或是指定某個動畫開始時就一起開始。
id.event;event 指定某個 id 的事件或是某個事件之後，就執行動畫，下面的範例，點選灰色矩形，就會執行動畫。
id.repeat(整數) 某個 id 元素的動畫執行幾次之後就會接續執行。
indefinite 可以直接使用超連結來控制動畫。
min / max 執行動畫最短和最長的時間，數值必須大於 0，min 其實沒有太直接的效果，而 max 倒是很容易可以看出來，當我們設定 max 為 10s，動畫將會在 10s 的時候停止。
restart (always | whenNotActive | never) 剛剛上面的範例有提到「可以使用超連結來控制動畫」，以及某個 id 點擊事件來觸發動畫，但使用的過程中會發現，每點一次動畫就跑一次，坦白說還真是有點討厭，這時候就必須使用 restart 的屬性，restart 總共有三個設定值，預設是 always，也就是每點一次就會執行一次，而 never 也很好理解就是永遠不會再觸發點擊的動作，另外一個設定就是 whenNotActive，這表示動畫正在執行的時候，點擊是沒有做用的。下面的範例設定動畫跑了三秒會停止，在動畫進行中，怎麼點擊按鈕都是沒有反應的。
fill ( freeze | remove ) 這裡的 fill 不是填色的 fill，而是提供動畫結束時的一個屬性，屬性包含了 freeze 和 remove，remove 是預設值，也就是動畫結束之後，圖形返回原本的狀態，而 freeze 則是在動畫結束後，固定在結束的狀態。
動畫添加與合併屬性
additive ( replace | sum ) 這是可以把動畫效果進行置換 replace 或相加 sum 的屬性，例如在 animateTransform 裏頭，type 會有 rotate、traslate、scale 和 skew 等設定，如果我們使用 replace，後面的動畫就會置換掉前面的動畫，使用 sum 就會將兩個動畫效果加在一起。下面的範例把位移、放大和旋轉三個效果合而為一，因為放大會改變位置，所以使用 translate 把位置調整回來。
accumulate ( none | sum ) 設定動畫結束後，是否從結束的地方接續動畫下去，none 是預設值，如果我們使用 sum，則會在第一段動畫結束的狀態繼續往下加，例如一開始縮放是 1>2，下一段就是2>4，下一段就是4>6，依此類推，不過使用者個屬性有規定，如果不是重複的動畫就不能使用。
SVG 研究之路 (8) - text 文字
基本用法
文字的基本用法很簡單，就是使用
標籤，然後將需要顯示的文字放在裏頭即可，而
標籤裡具有 x、y、dx、dy、rotate、textLength、lengthAdjust 屬性，可以進行基本的文字編輯，此外你也可以自行添加 CSS 樣式，讓字體的變化更多元。
比較特別的是，這些屬性的設定，都可以視為一個單行陣列的形式呈現，例如除了寫x="10"之外，也可以寫成x="10,20,30,40"，裏頭的數值分別代表了文字的每個字，如果只寫了一個值，就是設定第一個字的屬性，因為沒有其他值，因此從第二個字開始就會接續第一個字。
x、y 與 dx、dy 的差異，一個是絕對位置，一個相對位置，x、y 是基於原本的位置去做改變，而 dx、dy 則是基於前一個字的位置去做變化。
rotate同樣也可以使用陣列的方式，讓文字可以旋轉。
textLength設定這段文字的長度，和lengthAdjust( 設定對這段文字長度的調整 ) 搭配進行，lengthAdjust有兩種值可以設定，一種是spacing，就是拉寬文字間距，讓文字滿足textLength的寬度，另外一種是spacingAndGlyphs，也就是把文字拉寬，直到滿足textLength的寬度為止。
TSPAN 元素
< tspan>< /tspan>是 SVG 文字裡頭重要的元素，因為它可以塑造出千變萬化的文字表現方式，而看< tspan>的字面，其實可以把它想像成 HTML 裏頭的span也無妨，也可以想像成在< text>裏頭的一個一個文字群組。< tspan>和< text>具有的屬性值幾乎一模一樣，也是 x、y、dx、dy、rotate、textLength。
同樣也可以使用 x、y 與 dx、dy 的陣列方式做變化。
使用 rotate同樣也可以使用陣列的方式，讓文字可以旋轉。
使用路徑
除了以上的文字變化外還不稀奇，使用過 Illustrator 的朋友們都知道，我們可以讓文字跟隨路徑，做出各種形狀的文字，至於寫程式該怎麼寫呢？這時候就要回想起上一篇 fill 漸層 所提到的定義檔< defs>< /defs>，我們只需要在< defs>< /defs>定義好路徑，讓文字和路徑做連結，就可以讓文字隨著路徑跑囉！
定義路徑：
加上
讓文字跟路徑做連結：
除了單純的設定文字跟隨路徑，也可以藉由 startOffset 來設定文字在路徑上的起始位置。(使用百分比)。
set 下列的範例表示兩秒之後，正方形會移到 x=70 的地方。