我的 SVG 平面圖完整設定公開（可以直接複製改）

charles

這是平面圖系列的最後一篇。

把我自己在用的完整設定貼出來，可以直接改成你家的。



檔案結構

1. /config/www/floorplan/
2. ├── home.svg           ← 平面圖本體
3. ├── home.css           ← 所有樣式和動畫
4. └── (沒有別的了)

複製代碼

SVG 版本的好處之一：檔案很少。
不用一堆圖層 PNG。

一、SVG 的結構

用文字編輯器打開的話，長這樣（簡化版）：

1. <svg width="1000" height="620" viewBox="0 0 1000 620"
2.      xmlns="http://www.w3.org/2000/svg">
4.   <!-- 濾鏡定義（光暈效果用） -->
5.   <defs>
6.     <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
7.       <feGaussianBlur stdDeviation="10" result="b"/>
8.       <feMerge>
9.         <feMergeNode in="b"/>
10.         <feMergeNode in="SourceGraphic"/>
11.       </feMerge>
12.     </filter>
13.   </defs>
15.   <!-- 房間（id = 那個房間主燈的實體 ID） -->
16.   <rect id="light.living_room"  x="0"   y="0"   width="400" height="312"/>
17.   <rect id="light.dining_room"  x="400" y="0"   width="250" height="312"/>
18.   <rect id="light.kitchen"      x="650" y="0"   width="350" height="312"/>
19.   <rect id="light.entrance"     x="0"   y="312" width="180" height="288"/>
20.   <rect id="light.bedroom"      x="180" y="312" width="320" height="288"/>
21.   <rect id="light.bathroom"     x="500" y="312" width="180" height="288"/>
22.   <rect id="light.second_bedroom" x="680" y="312" width="320" height="288"/>
24.   <!-- 房間名稱（純裝飾，不接實體） -->
25.   <text x="14" y="30" class="room-name">客廳</text>
26.   <text x="414" y="30" class="room-name">餐廳</text>
27.   ...
29.   <!-- 感測器數值（id = 感測器的實體 ID） -->
30.   <text id="sensor.living_room_temperature" x="330" y="280"
31.         class="sensor-text">--</text>
32.   <text id="sensor.bedroom_temperature" x="430" y="580"
33.         class="sensor-text">--</text>
35.   <!-- 門（會轉開的那個） -->
36.   <rect id="binary_sensor.front_door" x="60" y="596"
37.         width="80" height="6"/>
39.   <!-- 人體感應（小圓圈） -->
40.   <circle id="binary_sensor.bathroom_motion" cx="590" cy="480" r="12"/>
42.   <!-- 警報圖示（平常看不見） -->
43.   <circle id="binary_sensor.kitchen_leak" cx="720" cy="270" r="16"
44.           class="alert-idle"/>
45. </svg>

複製代碼

幾個設計決定：

• 房間的 id 就是那盞燈 —— 點房間就是開關燈，最直覺
  
• 房間名稱不接實體 —— 純裝飾，用 class 統一樣式
  
• 感測器用 <text>，初始內容是 "--" —— 載入前不會是空白
  
• 警報圖示預設有 class="alert-idle" —— 平常 opacity: 0
  

二、完整的 CSS

1. /* ============ 全域 ============ */
2. svg {
3.   font-family: "Microsoft JhengHei", "PingFang TC", sans-serif;
4. }
6. /* 所有房間的共同樣式 */
7. rect[id^="light."] {
8.   stroke: #3A4250;
9.   stroke-width: 3;
10.   cursor: pointer;
11. }
13. /* ============ 燈光 ============ */
14. .light-off {
15.   fill: #F4F6FA !important;
16.   filter: none;
17.   transition: fill 0.8s ease-in-out, filter 0.8s ease-in-out;
18. }
20. .light-on {
21.   fill: #FFD54F !important;
22.   filter: url(#glow);
23.   transition: fill 0.8s ease-in-out, filter 0.8s ease-in-out;
24. }
26. /* 不可用（裝置掉線） */
27. .light-unavailable {
28.   fill: #E8E8E8 !important;
29.   stroke-dasharray: 6 4;
30. }
32. /* ============ 房間名稱 ============ */
33. .room-name {
34.   font-size: 19px;
35.   font-weight: bold;
36.   fill: #344052;
37.   pointer-events: none;      /* 讓點擊穿透到底下的房間 */
38. }
40. /* ============ 感測器文字 ============ */
41. .sensor-text {
42.   font-size: 15px;
43.   font-weight: 500;
44.   fill: #2C3440;
45.   transition: fill 0.6s;
46.   pointer-events: none;
47. }
48. .sensor-hot    { fill: #E53935; }
49. .sensor-warm   { fill: #FB8C00; }
50. .sensor-cold   { fill: #1E88E5; }
52. /* ============ 門 ============ */
53. .door-closed, .door-open {
54.   fill: #8D6E63;
55.   transform-origin: top left;
56.   transform-box: fill-box;
57.   transition: transform 0.6s ease-in-out;
58. }
59. .door-closed { transform: rotate(0deg); }
60. .door-open   { transform: rotate(-75deg); }
62. /* ============ 人體感應 ============ */
63. @keyframes motion-ping {
64.   0%   { r: 12; opacity: 0.9; }
65.   100% { r: 26; opacity: 0; }
66. }
67. .motion-detected {
68.   fill: #42A5F5;
69.   animation: motion-ping 1.6s ease-out infinite;
70.   transform-box: fill-box;
71. }
72. .motion-clear {
73.   fill: #C5CAD3;
74.   opacity: 0.35;
75.   transition: opacity 0.6s;
76. }
78. /* ============ 警報 ============ */
79. @keyframes alert-pulse {
80.   0%, 100% { opacity: 1;    fill: #E53935; }
81.   50%      { opacity: 0.3;  fill: #FF8A80; }
82. }
83. .alert-active {
84.   animation: alert-pulse 0.9s ease-in-out infinite;
85. }
86. .alert-idle {
87.   opacity: 0;
88.   transition: opacity 0.5s;
89.   pointer-events: none;
90. }

複製代碼

三個值得學的小技巧

技巧一：用屬性選擇器統一設定

1. rect[id^="light."] {
2.   stroke: #3A4250;
3.   stroke-width: 3;
4. }

複製代碼

[id^="light."] 的意思是「id 以 light. 開頭的元素」。

這樣所有房間一次設定完，不用一個一個寫。

技巧二：pointer-events: none 讓文字不擋點擊

房間名稱和感測器數值疊在房間上面，
點下去會點到文字而不是房間。

加了 pointer-events: none 之後，點擊會穿透過去。

這個小細節很重要，不然使用者會覺得「有時候點得到有時候點不到」。

技巧三：動畫 r 屬性做出擴散效果

1. @keyframes motion-ping {
2.   0%   { r: 12; opacity: 0.9; }
3.   100% { r: 26; opacity: 0; }
4. }

複製代碼

r 是圓形的半徑。動畫它就會做出「水波擴散」的效果 ——
偵測到人的時候，那個小圓圈會一圈一圈擴散出去。

這個效果 Picture Elements 完全做不到。



三、完整的卡片設定

1. type: custom:floorplan-card
2. full_height: true
3. config:
4.   image: /local/floorplan/home.svg
5.   stylesheet: /local/floorplan/home.css
6.   log_level: warning
7.   console_log_level: warning
9.   defaults:
10.     hover_action: hover-info
11.     tap_action: more-info
13.   rules:
14.     # ---------- 燈光 ----------
15.     - name: 所有房間的燈
16.       entities:
17.         - light.living_room
18.         - light.dining_room
19.         - light.kitchen
20.         - light.entrance
21.         - light.bedroom
22.         - light.bathroom
23.         - light.second_bedroom
24.       tap_action: toggle
25.       hold_action: more-info
26.       state_action:
27.         action: call-service
28.         service: floorplan.class_set
29.         service_data: >
30.           ${entity.state === 'unavailable' ? 'light-unavailable'
31.             : (entity.state === 'on' ? 'light-on' : 'light-off')}
33.     # ---------- 溫度：文字 ----------
34.     - name: 溫度數值
35.       entities:
36.         - sensor.living_room_temperature
37.         - sensor.bedroom_temperature
38.         - sensor.second_bedroom_temperature
39.       state_action:
40.         - action: call-service
41.           service: floorplan.text_set
42.           service_data: >
43.             ${isNaN(parseFloat(entity.state)) ? '--'
44.               : parseFloat(entity.state).toFixed(1) + '°'}
45.         - action: call-service
46.           service: floorplan.class_set
47.           service_data: >
48.             ${(() => {
49.               const t = parseFloat(entity.state);
50.               if (isNaN(t)) return 'sensor-text';
51.               if (t >= 29) return 'sensor-text sensor-hot';
52.               if (t >= 27) return 'sensor-text sensor-warm';
53.               if (t <= 20) return 'sensor-text sensor-cold';
54.               return 'sensor-text';
55.             })()}
57.     # ---------- 門 ----------
58.     - name: 門窗
59.       entities:
60.         - binary_sensor.front_door
61.       state_action:
62.         action: call-service
63.         service: floorplan.class_set
64.         service_data: '${entity.state === "on" ? "door-open" : "door-closed"}'
66.     # ---------- 人體感應 ----------
67.     - name: 人體感應
68.       entities:
69.         - binary_sensor.bathroom_motion
70.         - binary_sensor.hallway_motion
71.       state_action:
72.         action: call-service
73.         service: floorplan.class_set
74.         service_data: >
75.           ${entity.state === 'on' ? 'motion-detected' : 'motion-clear'}
77.     # ---------- 警報 ----------
78.     - name: 漏水與瓦斯
79.       entities:
80.         - binary_sensor.kitchen_leak
81.         - binary_sensor.bathroom_leak
82.         - binary_sensor.kitchen_gas
83.       state_action:
84.         action: call-service
85.         service: floorplan.class_set
86.         service_data: >
87.           ${entity.state === 'on' ? 'alert-active' : 'alert-idle'}

複製代碼

注意 state_action 可以是一個清單 ——
溫度那條規則同時做了兩件事（換文字 + 換 class）。

怎麼改成你家的

• 第一步：把 SVG 裡的房間座標改成你家的（上一篇教過怎麼算）
  
• 第二步：把所有 light.xxx 換成你的實體 ID
  
• 第三步：CSS 可以完全不改（顏色不滿意再調）
  
• 第四步：YAML 裡的 entities 清單換成你的
  

CSS 那份幾乎可以照抄，因為它跟你的實體 ID 無關。

最後：兩個版本並存的設定

前面提過我手機用 Picture Elements、平板用 SVG。

做法是兩個不同的儀表板：

• 設定 → 儀表板 → 新增儀表板
  
• 一個叫「首頁」（Picture Elements 版）
  
• 一個叫「平板」（SVG 版）
  
• 平板的瀏覽器書籤直接開「平板」那個
  

這樣手機端永遠不會因為 HACS 外掛出問題而掛掉。

平面圖系列的總結

十八篇走完，回頭看幾個心得：

• Picture Elements 版本就能滿足九成需求，先做那個
  
• 最有價值的不是動畫，是「一眼看完整個家」
  
• 家人會用，才算成功 —— 我的判斷標準是「有沒有人主動用它開燈」
  
• 不要塞太多東西，20-25 個元素是舒適的上限
  
• transition 比 animation 重要 —— 安靜的介面才耐看
  

做完之後最意外的收穫：

我太太本來完全不碰 HA 的 App，
平面圖做好之後她開始自己關燈了 ——
因為她看到的是「我們家」，不是一堆卡片。

---

平面圖系列到這裡結束。

下一篇開始講儀表板本身 ——
Sections 版面、Tile 卡片、card-mod，
這些是不做平面圖也用得到的東西。