用 Inkscape 畫 SVG 平面圖，並且讓房間真的跟著燈變色

charles · 發表於 2026-9-21 12:46:23

這篇的內容（11 段）

步驟 1：裝 Inkscape
步驟 2：設定畫布
步驟 4：設定顏色
步驟 7：另存為純 SVG
步驟 8：三個一定要避開的坑
坑一：要接 HA 的元素不要群組
坑三：SVG 裡的點陣圖片
步驟 10：安裝 ha-floorplan
步驟 13：驗證
接下來可以做什麼
檢查清單

這篇從打開 Inkscape 開始，做到房間真的在 Home Assistant 裡跟著燈變色為止。

完全沒用過 Inkscape 也沒關係，畫平面圖只會用到四個工具。

一件事先講清楚：很多教學畫完 SVG 就結束，說「id 設成實體 ID 就會自動接上」。那不是真的。id 對了只代表 ha-floorplan 找得到那個圖形，你還要告訴它「狀態變了要做什麼」，不然那張圖會完全不動，而且不會有任何錯誤訊息。這篇會把那一段寫完。

你還要告訴它「狀態變了要做什麼」，不然那張圖會完全不動，而且不會有任何錯誤訊息。

步驟 1：裝 Inkscape

去 inkscape.org 下載，免費。目前的穩定版是 1.4.4（2026 年 5 月）。下載頁上可能會看到 1.5 的開發版，不要裝那個 —— 1.5 到現在還沒正式釋出，而且它的新頁面格式舊版打不開。

你只需要學四個工具：

方形工具按 R 畫房間
選取工具按 S 移動、縮放、輸入精確數字
文字工具按 T 標房間名和數值
橢圓工具按 E 畫裝置的位置點

複製代碼

再加一個面板：物件屬性（Ctrl+Shift+O），用來改 id。這是整個流程最重要的一個面板。

步驟 2：設定畫布

檔案 -> 文件屬性（Ctrl+Shift+D）。

把「顯示單位」改成 px
寬度和高度也把單位切成 px，填成跟你家的比例一樣

訣竅：讓 1 px 等於 1 公分。你家是 10 公尺 x 6.2 公尺，就把畫布設成 1000 x 620 px。這樣畫的時候直接填你量到的公分數，完全不用換算。

你會看到什麼：畫布變成一個寬扁的長方形，右下角或狀態列顯示的單位是 px。

步驟 3：用輸入數字畫房間，不要用滑鼠拖

按 R 選方形工具，在畫布上隨便拉一個方形（大小先不管）。

然後按 S 切回選取工具 —— 上方的工具列會出現 X、Y、W、H 四個輸入框。直接在裡面打數字，每打完一個按 Enter。

X Y W H
客廳 0 0 400 312
餐廳 400 0 250 312
廚房 650 0 350 312
玄關 0 312 180 288
主臥 180 312 320 288
浴室 500 312 180 288
次臥 680 312 320 288

複製代碼

X 是這個房間左邊界離畫布左邊多遠、Y 是上邊界離畫布上面多遠、W 和 H 是你量到的長寬。

第二個房間的 X 等於第一個房間的 X 加上它的 W，一路推下去，房間之間就不會有縫隙或重疊。

一定要用打數字的。用滑鼠拖永遠對不齊，差兩三個像素在畫面上就是一條白縫，而且你之後很難找出是哪一個房間偏了。

你會看到什麼：七個方形緊密地排成兩排，沒有縫也沒有重疊。

步驟 4：設定顏色

全選（Ctrl+A），然後 物件 -> 填充和邊框（Ctrl+Shift+F）：

填充：淺灰 F4F6FA
邊框顏色：深灰 3A4250
邊框樣式 -> 寬度：3 px

在 Inkscape 的色碼欄位裡填的是 RRGGBBAA 八碼，所以要打 F4F6FAff（最後兩碼 ff 是不透明）。少打那兩碼會變成全透明，圖看起來一片空白。

步驟 5：給每個房間一個 id（整篇最重要的一步）

以下還有約 81% 的內容
登入後即可閱讀完整教學

登入繼續閱讀使用 Google 登入

		自動登入	找回密碼
密碼			立即註冊

用 Inkscape 畫 SVG 平面圖，並且讓房間真的跟著燈變色

延伸閱讀

瀏覽過的版塊