SVG : path 加不加 Z 差很多

為了解決筆順練習的工具可以在 iOS 中一次下載多個部件或筆畫，認真的研究了一下 SVG 圖形的語法，哈！新手上路，總是有些地方混沌不清(根本亂玩)。不過，遇到問題總是件好事，由一個點出發，挖出了不少盲點與有用的資訊。

筆順練習的筆順資料，基上會使用到的就是 SVG 中的幾個 path 的指令：

• M : MoveTo
• L : LineTo
• Q : QuadTo
• C : CubicTo

原本以為找出對應關係，就這樣簡單，頂多是加上，部件是由多個筆畫的 path 組合起來這個程序，就能完成一個 SVG 檔案中，放入多個部件的 path，使用者，要運用時，再將部件利用軟體中的「拆解」或「分解」功能來拆開就好。而前兩天在 iOS 中使用 Keynote、Pages 或是 Numbers 也是確實如此。不過，來看看 [圖1] ，當我將我的筆順練習工具製作好的 SVG 檔，插入到 LibreOffice Impress 中時，卻有不同的結果：

[圖1] LibreOffice Impress

「雄」這個字的第一個部件，第一筆畫和第二筆畫交叉處，[圖1] 藍色箭頭和綠色箭頭是不是長得不一樣？

在 SVG 的 path 指令中有一個「Z」可以用來標示 path 結束了，[圖1] 左側的字就是沒有加上「Z」的結果，而右側的字，在每一個筆畫的指令字串最後面加上「Z」以，就正常顯示了。

這讓我想起，在使用 HTML5 的 canvas 繪圖指令時，有沒有加上 closePath 也是有差的，當初好像也卡了好久才發覺。

關於 SVG path 還可以使用哪些指令，可以參考 Mozilla 的這個線上說明：

• https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

目前筆順練習工具可以在「部件拆解」的頁面中，下載全字的部件或是筆畫 SVG 格式圖片

[圖2] 筆順練習下載 SVG 圖檔的選單

在 LibreOffice 或 Apple 的 Office 工具中，「部件」的話，一個字可以分解到以部件為基本單位，而「筆畫」則可以拆解到以筆畫為基本單位，依自己的需求下載不同的 SVG 圖檔。

相關文章

• 雄 : HTML5 : 筆順練習第三版(2019版)

• 雄:HTML5 FUN 精選集