SVG 平面圖不會動？六個症狀的判斷順序與三個不會報錯的坑

charles

這篇的內容（20 段）

1. 步驟 1：先把記錄面板打開
2. 步驟 2：做一次隔離測試
3. 症狀一：卡片一片空白
4. 1. SVG 檔案到底拿不拿得到
5. 2. 卡片型別對不對
6. 3. SVG 有沒有 viewBox
7. 4. 資源有沒有載入
8. 5. 進不去 Home Assistant 本身
9. 檢查二：大小寫
10. 檢查四：id 裡有沒有點號
11. 症狀三：點得到但顏色不變
12. 解法 A：加 !important
13. 解法 B：去 SVG 刪掉行內的 fill
14. 解法 C：改成 presentation attribute
15. 原因三：被群組包住
16. 症狀五：文字沒有更新
17. 檢查三：文字被裁掉了
18. 真的卡頓的話
19. 收工前的檢查清單
20. 最後一個省時間的習慣

SVG 平面圖（ha-floorplan）卡住的時候最麻煩的地方是：它壞掉的樣子跟沒壞一模一樣。沒有紅字、沒有錯誤訊息，就是不動。

這篇給你一個固定的查法：先做一次隔離測試把範圍縮到一層，再照症狀查。



步驟 1：先把記錄面板打開

所有除錯都從這裡開始，九成的問題看這個就知道答案。

編輯那張卡片，在 `config:` 底下加兩行：

1. config:
2.   image: /local/floorplan/home.svg
3.   stylesheet: /local/floorplan/home.css
4.   log_level: info
5.   console_log_level: info
6.   rules:
7.     ...

複製代碼

• log_level → 卡片下方會出現一塊灰色面板
  
• console_log_level → 同樣的內容送到瀏覽器 F12 的 Console
  

兩個都可以填 `error` / `warn` / `info` / `debug`，越往後越囉嗦。除錯時用 `info`。

v1.2.0 起卡片有視覺化編輯器，這兩個是下拉選單，不用手打。

你會看到什麼：面板裡會逐條列出

• 載入了哪些 SVG 元素
  
• 哪個 id 找不到（這行會直接寫出你打錯的那個名字）
  
• 哪條規則被觸發了
  
• JavaScript 有沒有丟例外
  

面板根本沒出現 → `log_level` 的縮排跑掉了，它必須跟 `image` / `rules` 同一層，在 `config:` 底下。

步驟 2：做一次隔離測試

在改任何東西之前，先確定壞的是哪一層。開一張全新的卡片，貼這份最小測試：

1. type: custom:floorplan-card
2. title: 隔離測試
3. config:
4.   image: /local/floorplan/home.svg
5.   stylesheet: /local/floorplan/home.css
6.   log_level: info
7.   console_log_level: info
8.   rules:
9.     - name: 只測一個元素
10.       entities:
11.         - entity: light.living_room
12.           element: room-living
13.       tap_action: toggle
14.       state_action:
15.         action: call-service
16.         service: floorplan.style_set
17.         data:
18.           style: '${entity.state === "on" ? "fill: #ff0000;" : "fill: #0000ff;"}'

複製代碼

把 `light.living_room` 和 `room-living` 換成你正在卡的那一組。

這份測試刻意做了三件事：只有一條規則（排除規則互相打架）、用 style_set（行內樣式優先權最高，排除 CSS 被蓋掉）、顏色是純紅純藍（排除「顏色太像看不出來」）。

結果怎麼讀：

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

登入繼續閱讀使用 Google 登入