請解釋SVG路徑命令和座標

Question

在SVG文件，我發現它看起來像這樣的路徑：

<path id="kvg:0548b-s7" kvg:type="㇐b" d="M65.32,48.38c5.65-0.95,12.61-2.46,18.92-3.42c2.05-0.45,4.13-0.5,6.23-0.13"/> 

有人可以解釋一下座標48.38c5.65-0.95和18.92-3.42c2.05-0.45代表什麼？

Answer 1

我認爲有些混淆來自格式允許將各個參數分離到各種路徑操作數的技巧。因此，在例如：

M65.32,48.38c5.65-0.95,12.61-2.46,18.92-3.42c2.05-0.45,4.13-0.5,6.23-0.13

你看參數

• 由逗號M（OVE）65.32,48.38分離爲...
• 用連字符（減號）在C分離（UBIC貝塞爾）2.05-0.45 ...
• 通過分隔新的操作數，如... 48.38c5.65 ...
• ，你還可以看到用空格代替逗號分隔參數
• 你甚至可以看到一個領先的句點分隔，如果前面的參數在它
• 過一段有時你會看到在科學記數法參數參數在3.22e-9中消除零點

由於每種操作數都需要一定數量的參數（M，L，T需要2; H，V需要1; Q，S需要4; C需要6;需求7; Z需要0）你會看到操作數被忽略的情況。如果你看到後面有4個參數的L，它實際上意味着2行，C後面有18個參數，這意味着3立方貝塞爾。

這是爲了最大限度地減少SVG中的浪費空間，而不僅僅是爲了使其難以閱讀。

Answer 2

SVG的<path>標記的d屬性包含一系列處理指令或描述，以創建SVG的整體形狀。這些指令可以是不同的類型：

1. MOVETO ::重啓路徑別的地方（M或m語法）
2. 的LineTo ::畫一條直線（L或l語法，或H和V，或h和v）
3. Curveto ::繪製三次Bezier曲線（C或c語法）
4. 包含arcTo ::繪製的橢圓曲線（A或a語法）
5. ClosePath ::畫一條直線的路徑（Z或z語法）

的開口點

大寫字母語法表示給出絕對位置值。小寫語法表示相對位置值，即，後續座標從當前控制點向下和向右找到。

您的SVG的d屬性中提供的說明以大寫字母M開頭，該大寫字母表示Moveto命令的絕對位置值。但是也存在小寫的c命令，其表示Curveto指令集的相對值。

關於第一個座標則是問有關...

Moveto命令有兩個參數。在您要查詢的第一個值的第一個段中，48.38是命令的軸參數y（其跟隨x參數65.32）。其餘的c5.65-0.95是新的Curveto指令集的開始。

Curveto命令有三個參數，由x和y對組成，每個對由短劃線（-）分隔開。由於它以小寫字母c給出，因此後面的值是相對的。第一對是開始曲線的控制點，第二對是結束曲線的控制點，第三對是定義曲線開始的當前點的座標。

關於您詢問的第二組座標...

的18.92-3.42是由第一Curveto命令定義的當前點（第三個參數），並且c2.05-0.45是下一Curveto命令的第一個參數，其控制貝塞爾曲線的起點。

這些值中的點是小數點。

如果按d屬性將其拆分，根據文檔中定義的參數個數，每條命令的指令集將變爲much more readable。

有關d屬性的更多信息，請參閱see here和here。

有關貝塞爾曲線的更多信息，see here。