用 Inkscape 畫可以動的 SVG 平面圖（完整步驟）

charles

這篇從打開 Inkscape 開始，一步一步畫出一張能接 HA 的 SVG。

完全沒用過 Inkscape 也沒關係。



先講你只需要學四個東西

Inkscape 功能很多，但畫平面圖只需要這四個：

• 方形工具（按 R）—— 畫房間
  
• 選取工具（按 S）—— 移動、縮放
  
• 文字工具（按 T）—— 標房間名
  
• XML 編輯器（Ctrl+Shift+X）—— 改 id（最重要）
  

其他的都可以不用管。

步驟一：設定畫布

檔案 → 文件屬性（Ctrl+Shift+D）

• 顯示單位：改成 px
  
• 寬度 / 高度：設成跟你家的比例一樣
  

訣竅：讓 1 px = 1 公分。

例如你家是 10 公尺 × 6.2 公尺 → 畫布設 1000 × 620 px。

這樣畫的時候直接填你量到的公分數就好，不用換算。

步驟二：畫出房間

按 R 選方形工具，在畫布上隨便拉一個方形。

然後按 S 切回選取工具，在上方的工具列直接輸入數字：

1.       X      Y      W      H
2. 客廳   0      0      400    312
3. 餐廳   400    0      250    312
4. 廚房   650    0      350    312
5. 玄關   0      312    180    288
6. 主臥   180    312    320    288
7. 浴室   500    312    180    288
8. 次臥   680    312    320    288

複製代碼

用輸入數字，絕對不要用滑鼠拖 —— 拖的話永遠對不齊，
房間之間會有縫隙或重疊。

怎麼算這些數字：

• X = 這個房間左邊界離畫布左邊多遠
  
• Y = 上邊界離畫布上面多遠
  
• W / H = 你量到的長寬
  

第二個房間的 X = 第一個房間的 X + W，以此類推。

步驟三：設定顏色

選中所有房間（Ctrl+A），然後 物件 → 填充和邊框（Ctrl+Shift+F）：

• 填充：淺灰 #F4F6FA
  
• 邊框顏色：深灰 #3A4250
  
• 邊框樣式 → 寬度：3 px
  

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

這一步是整個 SVG 平面圖的核心。

• 按 Ctrl+Shift+X 打開 XML 編輯器（會在右邊出現一個面板）
  
• 點一下客廳那個方形
  
• XML 編輯器裡會highlight對應的那一行，例如 <svg:rect id="rect1234">
  
• 點那個 id 屬性
  
• 把值改成 light.living_room（你的實體 ID）
  
• 按 Enter
  

重複做完每個房間。

命名規則：

1. 房間的方形         →  對應的燈的實體 ID
2. 客廳              →  light.living_room
3. 主臥              →  light.bedroom
4. 廚房              →  light.kitchen

複製代碼

為什麼要用實體 ID 當 id：
ha-floorplan 就是靠這個名字把圖形跟實體接起來的。

名字對了就自動接上，不用寫任何設定。

一個常見的困惑：

「我的客廳有三盞燈，id 要設哪一個？」

兩個做法：

• 做一個燈光群組 light.living_room_all，id 設它（推薦）
  
• 或者把房間拆成三塊，各自對應一盞燈
  

第一個做法簡單很多。

步驟五：加上房間名稱

按 T 用文字工具，在每個房間裡打上名字。

文字元素的 id 不重要，可以留預設的。

但如果你想讓文字也變色（例如房間名在燈開時變白），
那就要給它一個 id，例如 label_living_room。

步驟六：加上裝置圖示的位置



做法：在每個裝置的位置畫一個小圓圈（用橢圓工具，按 E）。

然後給它 id：

1. 客廳的溫度計位置  →  id = sensor.living_room_temperature
2. 浴室的人體感應    →  id = binary_sensor.bathroom_motion
3. 大門的門磁        →  id = binary_sensor.front_door

複製代碼

之後這些圓圈會依照實體的狀態變色。

想要顯示數字的話，用文字工具放一個文字元素，
id 一樣設成實體 ID —— ha-floorplan 會把文字內容換成實體的值。

步驟七：另存為純 SVG

檔案 → 另存為

• 檔名：home.svg
  
• 格式：純 SVG（Plain SVG）
  

不要選 Inkscape SVG —— 那個格式包含一堆 Inkscape 專用的資料，
檔案大三倍，而且有時候會干擾 CSS。

三個一定要避開的坑



坑一：不要用群組（Ctrl+G）

症狀：加了動畫之後，元素飛到畫面外，
或者旋轉的時候繞著奇怪的點轉。

原因：群組會在元素外面多包一層 <g>，
而且常常帶著一個 transform。

你的 CSS 動畫如果也用 transform，兩個會打架。

解法：

• 要接 HA 的元素一律不要群組
  
• 已經群組了的話，選中按 Ctrl+Shift+G 解散
  
• 或者在 CSS 裡加 transform-box: fill-box 和
    transform-origin: 50% 50% 強制指定旋轉中心
  

坑二：檢查元素身上有沒有殘留的 transform

就算沒群組，Inkscape 有時候也會幫元素加 transform
（特別是你用滑鼠縮放或旋轉過之後）。

怎麼檢查：在 XML 編輯器裡看那個元素有沒有 transform 屬性。

有的話怎麼辦：

• 直接在 XML 編輯器裡把那個屬性刪掉（然後重新用數字設定 X/Y/W/H）
  
• 或者 編輯 → 偏好設定 → 行為 → 變形，
    把「儲存變形」設成「最佳化」（會盡量把 transform 寫進座標裡）
  

坑三：插入的圖片要用「嵌入」不要「連結」

如果你在 SVG 裡放了 PNG 圖片（例如家具圖示）：

插入時會問你「嵌入還是連結」，一定要選嵌入。

連結的問題：那個路徑是相對於 SVG 檔案的位置，
但在 HA 的網頁上，瀏覽器會相對於網頁的網址去找 —— 找不到，圖就破了。

已經連結了怎麼辦：
擴充功能 → 圖片 → 嵌入圖片，可以把所有連結的圖片轉成嵌入。

（ha-floorplan 也有一個路徑前綴的設定可以修正這個，
但直接嵌入比較省事。）

完成之後的檢查

把 SVG 上傳到 /config/www/floorplan/home.svg，
然後在瀏覽器直接打開：

1. http://你的HA:8123/local/floorplan/home.svg

複製代碼

應該要看到你畫的平面圖。

看不到的話：

• 路徑錯了
  
• 或者 SVG 檔案有語法錯誤（用文字編輯器開來看看）
  

再檢查一次 id：

用文字編輯器（記事本就可以）打開 home.svg，搜尋 light.，
應該要看到你設定的那些 id。

1. <rect id="light.living_room" x="0" y="0" width="400" height="312" .../>

複製代碼

看到這個就代表成功了。

---

下一篇：安裝 ha-floorplan，把這張 SVG 接上 HA。

然後我們就會看到真正會動的平面圖了。