CSS 路徑 path ( 函式類型 )
除了「形狀」相關的 CSS 函式可以搭配 CSS 的動畫或裁切效果，也可以透過「路徑」相關 CSS 函式 path()，繪製類似 SVG 曲線的效果，讓裁切的形狀或動畫路徑產生更多與眾不同的效果，這篇教學會介紹如何繪製路徑，以及 path() 的用法。
延伸閱讀：CSS 形狀與線段 ( 函式類型 )
快速導覽：
認識路徑 path
path 是繪製 SVG 圖形的基本元素，透過 path 幾乎可以組成所有的形狀 ( 貝茲曲線、直線、封閉形狀等 )，如果使用瀏覽器開啟一張 SVG 圖片後檢視原始碼，就會看到原始碼中具有 path 的元素。
從原始碼中可以看到 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 ) |
繪製路徑並產生程式碼
雖然可以透過指令和參數繪製路徑形狀，但通常都是利用「向量繪圖軟體」來繪製 ( 幾乎不會有人直接寫程式碼 )，繪製路徑的軟體首推 Adobe Illustrator，透過「鋼筆工具」就可以輕鬆繪製路徑，但如果沒有相關軟體，也可以使用「Vectorpea」這個免費的線上 Illustrator 進行繪製路徑，點擊下方連結，就可以開啟 Vectorpea。
開啟 Vectorpea：https://www.vectorpea.com/
開啟 Vectorpea 之後，點擊「新增專案」，建立一個尺寸為 300x300 的空白檔案，尺寸可以按照個人需求調整，不過因為是網頁動畫圖片，建議不需要太大尺寸 ( 使用 Illustrator 也是同樣做法 )。
使用左側「鋼筆 Pen」工具，在畫布中點擊繪製路徑，單純點擊可以產生直線 ( 使用 Illustrator 也是同樣做法 )。
如果點擊時壓著滑鼠不放，就可以繪製貝茲曲線 ( 使用 Illustrator 也是同樣做法 )。
編輯路徑後，用滑鼠拖拉節點調整鈕就能調整貝茲曲線形狀，連續點擊節點就能變成「尖角」或「圓角」 ( 使用 Illustrator 也是同樣做法 )。
繪製完成後，從左上選單 File 裡選擇「Export as > SVG」，將檔案輸出為 SVG 格式 ( 勾選 minify )。
使用瀏覽器打開 SVG 觀察原始碼，就可以看見 SVG 的 path 元素，當中的 d 參數就是路徑，進行到這個步驟後就已經完成了路徑繪製。
搭配 clip-path 裁切元素
通常產生一段「封閉」路徑後，會搭配 clip-path 裁切出特定的形狀，進而在網頁中產生特殊效果，下方範例會展示運用兩種不同路徑產生的裁切效果。
<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<!-- CSS 程式碼 -->
<style>
div {
width: 250px;
height: 300px;
float: left;
}
.a {
clip-path: path("m35 11c-30.1 10.9-41.8 95.7-7 131 34.8 35.3 79 31.6 46 64-33 32.4 101.2 114.2 118 32 16.8-82.2 47.8-158.9-28-136-75.8 22.9-128.6 28.1-82-17 46.6-45.1 14.5-96.3-47-74z");
background: url("https://steam.oxxostudio.tw/image/index-css.jpg");
}
.b {
clip-path: path("m65.6 82q3.2-4.6 10.9-11 7.9-6.4 17-10.6 12.9-5.9 24.4-6.5 11.8-1.1 18.3 5.6 10.8 11.3 24.4 26.6 13.5 15.3 27.7 31.9 14.1 16.4 27.8 32.6 13.5 15.9 23.9 28.3-1.4 5-6.5 10.2-5.3 4.9-13.8 8.8-6.2 2.9-11 3.8-4.6 0.9-8.4 0.2-3.5-0.9-6.9-3.4-3.1-2.7-6.4-6.5l-12.8-15.6-46.7 21.4q1.5 8.7 3.3 17.9 1.7 9.2 3.2 17.9-3 2.9-6.7 5.8-3.5 2.6-9.2 5.2-13.1 6-21.6 4.6-8.3-1.8-12-9.8-1.7-3.6-2.3-7.7-0.6-4.1-1.6-9.5-1.4-7.8-3-19.6-1.4-11.8-3-25.5-1.7-13.9-3.1-28.5-1.4-14.7-2.6-27.5-1.4-13.2-2.3-23.4-0.7-10.3-1-15.7zm47.8 18.3l-1.6 0.7q1.4 12.5 2.9 28.1 1.7 15.1 4.3 30.4l32-14.6q-10-12.3-19.9-23.7-9.8-11.7-17.7-20.9z");
background: linear-gradient(45deg, red, yellow);
}
</style>
搭配 offset-path 產生動畫
path() 也很常搭配 CSS 動畫樣式屬性 animation，讓元素的動畫能根據指定的路徑移動，動畫樣式支援「封閉」與「開放」路徑，下方範例會展示運用兩種不同路徑產生的裁切效果，並額外使用 SVG 放在下層凸顯移動路徑。
<!-- HTML 程式碼 -->
<div class="a">
<svg viewBox="0 0 300 300"><path fill="none" stroke="#000" stroke-miterlimit="10" d="m35 11c-30.1 10.9-41.8 95.7-7 131 34.8 35.3 79 31.6 46 64-33 32.4 101.2 114.2 118 32 16.8-82.2 47.8-158.9-28-136-75.8 22.9-128.6 28.1-82-17 46.6-45.1 14.5-96.3-47-74z"/></svg>
<div></div>
</div>
<div class="b">
<svg viewBox="0 0 300 300"><path fill="none" stroke="#000" stroke-miterlimit="10" d="m148.9 281.8c-64.5-11.6-95.1-36.8-119.4-88.4-24.3-51.6 5-110.8 53.9-144.8 48.9-34 105.6-37.6 154 8 32 30.1 33.6 80.3 28.9 100-10.8 46-33.7 57.4-62 70-36.7 16.3-76.4 15.6-111.6-21.2-16.5-17.3-23.7-63.6-6.6-90.9 14.2-22.8 56-58.8 87.3-47.9 31.4 11 39.3 29.6 50.6 57.1 9.3 22.7-10.3 48.4-44.2 63.2-34 14.7-58.7-13.3-57-29.3 4.5-41.6 46.4-33.7 46.4-33.7"/></svg>
<div></div>
</div>
<!-- CSS 程式碼 -->
<style>
div {
position: relative;
width: 300px;
height: 300px;
float: left;
}
.b {margin-left: -60px;}
div div {
top: 0;
left: 0;
position: absolute;
width: 20px;
height: 20px;
background: red;
float: none;
}
.a div {
offset-path: path("m35 11c-30.1 10.9-41.8 95.7-7 131 34.8 35.3 79 31.6 46 64-33 32.4 101.2 114.2 118 32 16.8-82.2 47.8-158.9-28-136-75.8 22.9-128.6 28.1-82-17 46.6-45.1 14.5-96.3-47-74z");
animation: oxxo 2s infinite linear;
}
.b div {
offset-path: path("m148.9 281.8c-64.5-11.6-95.1-36.8-119.4-88.4-24.3-51.6 5-110.8 53.9-144.8 48.9-34 105.6-37.6 154 8 32 30.1 33.6 80.3 28.9 100-10.8 46-33.7 57.4-62 70-36.7 16.3-76.4 15.6-111.6-21.2-16.5-17.3-23.7-63.6-6.6-90.9 14.2-22.8 56-58.8 87.3-47.9 31.4 11 39.3 29.6 50.6 57.1 9.3 22.7-10.3 48.4-44.2 63.2-34 14.7-58.7-13.3-57-29.3 4.5-41.6 46.4-33.7 46.4-33.7");
animation: oxxo 2s infinite linear alternate;
}
@keyframes oxxo {
0% {offset-distance: 0%;}
100% {offset-distance: 100%;}
}
</style>
小結
對於 clip-path 和 animation 而言，path() 是一個相當實用的 CSS 函式，雖然沒有辦法完全做到 SVG 的功能 ( 縮放、變形等 )，但也能實現各式各樣不同形狀路徑的效果，如果網頁中有使用動畫或裁切效果，不妨應用 path() 來完成更多有趣的創意。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～