引言

在Kustom系列的圖形中，有一個叫做Path形狀的東西，它可以用一種更優(yōu)雅的方式來畫多邊形、折線統計圖，甚至…… （本文使用KWGT 3.73b314510作演示）

那么，該怎么使用它呢？ 那就需要我們了解一下SVG語法了～

一、基礎

1. 什么是SVG？

SVG（Scalable Vector Graphics）是一種基于XML的矢量圖形標準，它可以用來描述二維圖形和動畫效果。 SVG語法是一種描述SVG圖形的語言，主要由標簽、屬性和值組成。 2. 畫個五角星吧～

我們先嘗試畫一個五角星。 我們知道，在SVG路徑語法中，「M」命令代表落筆點（起始點），后面緊跟的坐標參數指定了該點在路徑中的位置。而「L」命令則代表繪制一條直線，后面緊跟的坐標參數指定了直線的終點坐標。 因此，「M 50,0」表示起始點坐標為(50,0)，在它后面加「L 62,38」表示從起始點(50,0)繪制一條直線到(62,38)。像上述這樣的每一段指令都需要用空格隔開。

另外，「Z」命令用于將當前繪制點與路徑的起始點連接，形成一個「閉合路徑」。 「Z」命令并不需要后面跟隨任何坐標參數，因為它會自動將路徑的終點坐標與起始點坐標連接起來。 遵循上面的規(guī)則，嘗試畫一個五角星。 即： M 50,0 L 62,38 L 100,38 L 69,62 L 81,100 L 50,75 L 19,100 L 31,62 L 0,38 L 38,38 Z

3. 畫折線∧_∧

如果你想用來畫折線，其實也非常簡單。 假如我要畫一條折線圖，數據的x、y坐標分別是(0,50)、(25,20)、(50,40)、(75,80)、(100,75)，我應該怎么寫呢？ 揭曉答案 M 0,50 L 25,20 L 50,40 L 75,80 L 100,75

這段代碼后面不需要加「Z」，因為這是折線，我們不需要把路徑「閉合」，只有畫封閉圖形的時候才需要加。 好了，接下來又有聰明的酷友要問了，我看某大佬他用這個畫的折線圖都是很平滑的。 那么這種平滑曲線應該怎么做呢？ 4.平滑曲線的制作～

了解一下命令「C」 ，定義三次貝塞爾曲線。 這是個什么東東我就不詳細解釋了，可以去百度查一下，你只需要知道它可以畫平滑曲線就行了。 書接上回，如果我們要畫一個平滑的折線圖，可以通過將折線圖曲線化來使其變得平滑，通過在路徑中使用曲線命令來實現。 以下是一個使用C命令繪制簡單平滑曲線的例子： M 50,50 C 75,0 125,100 150,50

代碼定義了一個落筆點M (50,50)，然后使用C命令連接了三個點(75,0)、(125,100)、(150,50)，從而繪制出一條簡單的曲線。 需要注意的是，C命令需要三個參數： 兩個控制點和一個結束點 —— 第一個控制點控制曲線的起始方向，第二個控制點控制曲線的結束方向。 你可以根據實際需要調整這些參數來繪制出不同形狀的曲線。 好了，正文到此結束 接下來是進階知識（拓展提高） 二、進階知識

以下是一些常用的SVG語法（深入了解）： 1. 值

SVG屬性可以有不同類型的值，如顏色值、長度值、角度值等。常見的SVG值包括： - 顏色值：可以使用顏色名稱、RGB值、十六進制顏色值等。 - 長度值：可以使用像素（px）、百分比（%）等。 - 角度值：可以使用度（deg）、弧度（rad）等。 2. 路徑語法

路徑語法用于定義路徑元素的形狀。路徑語法由多個命令和參數組成，用來描述路徑的起點、終點、曲線等信息。常見的路徑命令包括： - M：定義起始點。 - L：定義直線。 - H：定義水平線。 - V：定義垂直線。 - C：定義三次貝塞爾曲線。 - S：定義光滑三次貝塞爾曲線。 - Q：定義二次貝塞爾曲線。 - T：定義光滑二次貝塞爾曲線。 - A：定義橢圓弧線。 關于Path形狀的更對玩法，就請大家在編輯器中多多嘗試吧～ 最后給大家布置一個作業(yè)吧 看到這里，相信聰明的b友們都明白了 那么請動動手，嘗試畫一個六邊形吧～ 在評論區(qū)交作業(yè)哦