SVG : Namespace prefix xlink for href on a is not defined

2022年11以後，就沒有再更新 HTML5 FUN 的「分類圖」，之後新增的「分數條小教具」、「真分數小教具」、「幸運999」、「遊戲式題庫烘焙機」、「數學小白板」、「足球高手」都不在分類圖中。於是把去年儲存的 Xmind 檔案，以 Xmind 線上版開啟後，把新的工具加入。不過，看到 Xmind 提醒檔案是舊格式，就知道不妙了，果然因為格式的改變，花了一整天，還沒有完全解決輸出後的 SVG 格式相容的問題。

去年為了怕自己忘記加工的程序，特別寫了這一篇「Xmind : 線上版匯出為 SVG 圖檔」的記錄。雖然還是有找到 SVG 檔，但是 Xmind 在裡面用「foreignObject」來包住節點的標題及連結，這部份對網頁瀏覽器來說，沒有什麼影響(當然，如果是比較舊的瀏覽器，可能就會有差別)；但卻導致無法在 Inkscape 中看到節點的內容。試了很久，沒什麼進展，最後決定放棄用 Inkscape 來編輯了。

反正分類圖的內容，已經都在 Xmind 中處理好了，剩下的就是加上 QRCode 而已，就以 Notepad++ 純手工加語法吧！

將去年的做的 SVG 檔中，找到要添加的物件，複製後，貼到新匯出的 SVG 檔中，簡單吧！哈！要有這麼簡單，前面就不用寫一堆了。用瀏覽器開啟改好的 SVG 檔案，結果出現 [圖1] 這樣的畫面：

[圖1] 出現錯誤訊息的 SVG 檔案

關鍵的錯誤訊息：

Namespace prefix xlink for href on a is not defined

關鍵字應該是「xlink」，看了一下由舊檔案中複製過來的語法，有使用到：

• xlink:href
• xlink:title

再比對一下去年和今年的「svg」標籤中，新版的少了這個：

xmlns:xlink="http://www.w3.org/1999/xlink"

沒關係，少什麼就加什麼吧！

果然，加上去以後，我需要的 QRCode 圖片跟連結，就正常出現了。

[圖2] SVG 格式的 HTML5 FUN 分類圖

所以，要再幫去年的筆記追加一下：

• 修改 <svg ... > ，在裡面加入「xmlns:xlink="http://www.w3.org/1999/xlink"」
• 修改 <svg ... > 中的大小設定，稍微加寬一點：
  viewBox="0 0 1351 1267" width="1351" height="1267"
  改為
  viewBox="0 0 1351 1267" width="1521" height="1267"
• 在 </svg> 前加入 QRCode 群組的語法。

相關連結

• 雄 : HTML5 FUN 精選集

• 雄 :  SVG 格式的 HTML5 FUN 分類圖

• 雄 : Xmind : 線上版匯出為 SVG 圖檔