SVG 平面圖除錯速查：元素跑掉、點不到、CSS 沒生效

charles

這篇把 SVG 平面圖會遇到的問題整理成一份速查表。

卡住的時候照這個順序查。



第零步：先開記錄面板

所有除錯都從這裡開始。

1. config:
2.   log_level: info
3.   console_log_level: info

複製代碼

• log_level → 顯示在卡片下方
  
• console_log_level → 輸出到瀏覽器開發者工具（F12）
  

它會告訴你：

• 載入了哪些 SVG 元素
  
• 哪些 id 找不到
  
• 哪些規則被觸發了
  
• JavaScript 有沒有錯誤
  

九成的問題看這個就知道答案了。

症狀一：卡片一片空白



檢查順序：

• SVG 路徑對嗎 → 在瀏覽器直接打開 /local/floorplan/home.svg
  
• 卡片型別對嗎 → 要是 custom:floorplan-card（不是 floorplan）
  
• HACS 裝好了嗎 → Ctrl+F5 清快取再試
  
• SVG 檔案壞了嗎 → 用文字編輯器打開，看開頭是不是 <svg
  

還有一個容易忽略的：SVG 沒有設定 width / height / viewBox。

用文字編輯器打開，確認 <svg> 標籤有這些屬性：

1. <svg width="1000" height="620" viewBox="0 0 1000 620" ...>

複製代碼

沒有 viewBox 的話，SVG 不知道怎麼縮放，可能會變成 0 大小。

Inkscape 正常存檔都會有，但如果你手動改過就要檢查。

症狀二：SVG 出現了，但點了沒反應

九成是 id 對不上。

檢查一：用文字編輯器搜尋

打開 home.svg，搜尋你的實體 ID：

1. 搜尋 light.living_room

複製代碼

• 找得到 → id 沒問題，往下查
  
• 找不到 → 回 Inkscape 重設 id
  

檢查二：大小寫

id 是區分大小寫的。

1. light.Living_Room  ≠  light.living_room

複製代碼

檢查三：有沒有被別的元素蓋住

SVG 裡後面的元素蓋在前面的上面（跟 Picture Elements 一樣）。

如果你在房間上面又畫了一個透明的方形，
點擊會被那個方形吃掉。

檢查方法：在瀏覽器按 F12，用元素檢查器點那個房間，
看實際選到的是哪個元素。

檢查四：pointer-events

如果某個元素的 CSS 有 pointer-events: none，它就不能被點。

有些 Inkscape 的樣式會加這個，檢查一下。

症狀三：點得到但顏色不變



這是最常見的問題，原因通常是「行內樣式優先權比較高」。

Inkscape 會把顏色寫成元素的行內樣式：

1. <rect id="light.living_room" style="fill:#f4f6fa;stroke:#3a4250" />

複製代碼

行內的 style 優先權高過外部 CSS，
所以你的 .light-on 根本蓋不過它。

三個解法：

解法 A：加 !important（最快）

1. .light-on {
2.   fill: #FFD54F !important;
3. }

複製代碼

解法 B：去 Inkscape 刪掉行內樣式（最乾淨）

• XML 編輯器選中那個元素
  
• 找到 style 屬性
  
• 刪掉 fill 那一段（保留 stroke，不然邊框會不見）
  

解法 C：改用 presentation attribute

把 style="fill:#f4f6fa" 改成 fill="#f4f6fa"。

屬性的優先權比 CSS 低，所以 CSS 就蓋得過去了。

其他可能：

• class 名稱打錯 → 開 console 看實際套了什麼 class
  
• CSS 檔案路徑錯 → 在瀏覽器打開 /local/floorplan/home.css 測試
  
• 瀏覽器快取 → Ctrl+F5
  

症狀四：元素飛到畫面外 / 旋轉中心不對



這個只有兩個原因。

原因一：漏了 transform-box: fill-box

1. .door-open {
2.   transform: rotate(-75deg);
3.   transform-origin: top left;
4.   transform-box: fill-box;      /* ← 沒這行就會飛走 */
5. }

複製代碼

為什麼：SVG 預設的 transform 參考框是整個畫布，
所以 transform-origin: top left 指的是畫布的左上角，
不是元素的左上角。

加了 fill-box 之後，參考框才變成元素自己的邊界。

原因二：元素身上有殘留的 transform

Inkscape 在你用滑鼠縮放、旋轉之後，
會在元素上加一個 transform 屬性：

1. <rect id="light.living_room" transform="translate(12.5,8.3) scale(1.02)" />

複製代碼

你的 CSS transform 會覆蓋掉它，元素就跳位置了。

檢查方法：XML 編輯器看有沒有 transform 屬性。

解法：

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

原因三（比較少見）：被群組包住

<g> 標籤上的 transform 也會影響裡面的元素。

解法：選中按 Ctrl+Shift+G 解散群組。

症狀五：文字沒有更新

用 floorplan.text_set 但文字沒變？

檢查一：那個元素是 <text> 嗎

text_set 只對文字元素有效。

檢查二：Inkscape 的文字結構

Inkscape 產生的文字可能長這樣：

1. <text id="text.temp">
2.   <tspan>26.5°</tspan>
3. </text>

複製代碼

文字實際上在 <tspan> 裡面，而 text_set 改的可能是 <text>。

解法：

• 在 Inkscape 裡不要按 Enter 換行（會產生多個 tspan）
  
• 或者在文字元素上按 Shift+Ctrl+X，
    手動把 id 設在 tspan 上
  
• 或者改用 style_set 配 CSS 的 content（比較 hacky）
  

症狀六：手機上很慢或很卡



常見原因：

• 太多 animation 同時在跑 —— 改用 transition
  
• filter（光暈、模糊）很吃效能 —— 只用在一兩個元素
  
• SVG 檔案太大 —— 超過 500KB 的話檢查是不是嵌了大圖片
  
• 感測器回報太頻繁 —— 去 Z2M 設回報門檻
  

檢查方法：F12 → Performance 分頁 → 錄製幾秒鐘，
看是不是某個動畫吃掉大部分時間。

一份完整的檢查清單

做完 SVG 平面圖之後，照這個檢查一遍：

• SVG 有 viewBox
  
• 每個要互動的元素都有正確的 id（大小寫也要對）
  
• 要接動畫的元素沒有被群組
  
• 要接動畫的元素身上沒有 transform 屬性
  
• 行內 style 的 fill 已經刪掉，或 CSS 有加 !important
  
• 所有 transform 的 CSS 都有 transform-box: fill-box
  
• 圖片是嵌入不是連結
  
• 另存為「純 SVG」不是 Inkscape SVG
  
• log_level 開著（除錯階段）
  
• 在手機上實際測過
  

一個省時間的建議

不要一次做完再測。

我的做法：

• 畫一個房間
  
• 接上 HA，確認能點、能變色
  
• 確認沒問題之後，才畫其他房間
  

一次畫完八個房間然後全部不會動，
你會完全不知道是哪裡錯了。

---

下一篇：我的平面圖完整設定檔公開。

SVG 結構、CSS、YAML 全部貼出來，可以直接改來用。