要不要換成 SVG 平面圖：三個測試幫你決定

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

做到這裡，你的平面圖會亮燈、可以點、有溫濕度、有異常提示。那還需要 SVG 嗎？

這篇不講感覺，給三個各三分鐘的測試。做完你會知道自己卡在哪一層，然後才選路線 —— 因為大多數人以為「只有 SVG 做得到」的東西，其實內建卡片就做得到，而真正做不到的那一項，也不一定要用 SVG 來解。

步驟 1：先知道真正的分界線在哪

只有一條，而且它跟好不好看無關：

picture-elements 的 style 是原封不動交給瀏覽器的 CSS，不會經過 Home Assistant 的範本引擎。

翻成白話：卡片裡的樣式不能依數值算出來。你可以寫「溫度超過 29 就換成另一個紅色的標籤」（那是換元素，用 conditional 做得到），但不能寫「顏色 = 依溫度算出來的那個色碼」。

所有「連續變化」的需求都卡在這一條，其他的內建都能做。

步驟 2：測試 A —— 親眼看一次範本天花板

這個測試的目的是讓你確定自己不是抄錯，而是那條路本來就不通。

在你現有的平面圖卡片裡，隨便找一個 state-label
把它的 color 改成下面這樣
存檔，回到儀表板看

- type: state-label
entity: sensor.living_room_temperature
style:
top: 44%
left: 34%
font-size: 16px
font-weight: bold
color: "{{ 'red' if states('sensor.living_room_temperature') | float(0) > 20 else 'blue' }}"

複製代碼

你會看到什麼：數字照常顯示，字是預設顏色（深灰或白，看你的佈景主題），既不是紅色也不是藍色。

而且卡片不會報錯，日誌裡一個字都沒有。

這就是重點：這條路失敗的時候完全沒有症狀。所以很多人在這裡卡好幾個晚上 —— 他們把那段範本貼到設定 -> 工具 -> 範本去測，那邊跑得好好的，於是回頭懷疑自己的引號、縮排、空格。問題不在範本，是那個位置根本不吃範本。

測完把那一行改回寫死的顏色，例如 color: "#2c3440"。

步驟 3：測試 B —— 分段到底夠不夠

既然不能連續變化，那就分段。這個測試是要你自己判斷「分段」在實際使用上夠不夠。

把下面這兩段貼進你的平面圖卡片的 elements 底下（它做的是「29 度以下深灰、以上變紅」）：

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

登入繼續閱讀使用 Google 登入

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

要不要換成 SVG 平面圖：三個測試幫你決定

延伸閱讀

瀏覽過的版塊