ha-floorplan 動畫實作：燈漸亮、門轉開、風扇轉（含可直接貼的 SVG／CSS／YAML）

charles

這篇的內容（18 段）

1. 步驟 1：裝 ha-floorplan
2. 步驟 2：放一個最小的 SVG
3. 步驟 3：放一個最小的 CSS
4. 步驟 4：加卡片
5. 步驟 5：確認它活著
6. 動畫二：亮度對應真實亮度
7. 動畫三：燈的光暈
8. 動畫四：門真的轉開
9. 動畫五：風扇旋轉
10. 動畫六：警報脈動
11. 動畫七：房間有人的柔和呼吸
12. 完整的 CSS 檔
13. 完整的卡片 YAML
14. 三個最常見的卡關
15. 一、元素飛到畫面外
16. 二、CSS 改了沒反應
17. 三、動畫很卡
18. 還想再往下走的話

這篇要做出來的東西：一張會動的家裡平面圖。燈開的時候房間慢慢變黃、門開的時候門片真的轉開、風扇轉起來、漏水的時候紅點在閃。



不需要任何繪圖基礎。下面第一段會給你一個「兩個房間」的最小檔案，直接複製貼上就會動，你先讓它動起來，再把動畫一個一個加上去。每加一個都有「你會看到什麼」，看不到就知道是哪一步沒成。

這篇用到的工具叫 ha-floorplan，是 HACS 上的自訂卡片。它的工作只有一件事：

實體狀態變了，就去改 SVG 裡某個圖形的 class 或 style。

剩下全部是 CSS 的事。所以只要是 CSS 做得到的效果，平面圖上都做得到。

版本要求：ha-floorplan v1.2.0 以上（2026-07 發布）。這篇用到的「一條規則對應多個圖形」在 v1.2.0 才修好，舊版會有部分圖形沒反應而且不報錯。

步驟 1：裝 ha-floorplan

前提是你已經有 HACS。

• HACS → 搜尋 floor
  
• 找到 ha-floorplan → 下載
  
• 重新整理瀏覽器（Ctrl+F5）
  

你會看到什麼：之後在儀表板「新增卡片」的清單最下方，會多出一張叫 Floorplan Card 的卡片。

看不到那張卡片，代表資源沒載入。先 Ctrl+F5 清一次快取；還是沒有就去「設定 → 儀表板 → 右上角三點 → 資源」，確認清單裡有一筆 /hacsfiles/ha-floorplan/floorplan.js。

步驟 2：放一個最小的 SVG

在 Home Assistant 的設定目錄底下建一個資料夾 www/floorplan/（`www` 對外的網址是 `/local/`，這是 HA 的固定規則）。

用「檔案編輯器」或 Samba 建一個檔案 www/floorplan/home.svg，內容完整貼這一份：

1. <svg xmlns="http://www.w3.org/2000/svg"
2.      width="600" height="320" viewBox="0 0 600 320">
4.   <!-- 光暈濾鏡，後面動畫三會用到 -->
5.   <defs>
6.     <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
7.       <feGaussianBlur stdDeviation="8" result="b"/>
8.       <feMerge>
9.         <feMergeNode in="b"/>
10.         <feMergeNode in="SourceGraphic"/>
11.       </feMerge>
12.     </filter>
13.   </defs>
15.   <!-- 兩個房間。注意 id 是純英文，沒有點號 -->
16.   <rect id="room-living"  x="0"   y="0" width="360" height="320"/>
17.   <rect id="room-bedroom" x="360" y="0" width="240" height="320"/>
19.   <!-- 房間名稱，純裝飾 -->
20.   <text class="room-name" x="14"  y="30">客廳</text>
21.   <text class="room-name" x="374" y="30">臥室</text>
23.   <!-- 門片，動畫四會用到。畫成一條細長方形 -->
24.   <rect id="door-front" x="40" y="312" width="80" height="6"/>
26.   <!-- 風扇葉片，動畫五會用到 -->
27.   <g id="fan-living">
28.     <rect x="-3" y="-26" width="6" height="52" transform="translate(180,170)"/>
29.     <rect x="-26" y="-3" width="52" height="6" transform="translate(180,170)"/>
30.   </g>
32.   <!-- 漏水警示圓點，動畫六會用到 -->
33.   <circle id="alert-leak" class="alert-idle" cx="480" cy="250" r="14"/>
34. </svg>

複製代碼

為什麼 id 用 `room-living` 而不是 `light.living_room`

很多舊教學教你把 SVG 的 id 直接寫成實體 ID。不要這樣做，三個理由：

• CSS 選擇器碰到點號要跳脫，變成 `#light\.living_room`，很容易打錯。ha-floorplan 官方文件自己就寫「強烈建議完全不要在 id 裡用點號」
  
• 一個實體要同時驅動兩個圖形（例如房間底色 + 一個小燈泡圖示）就做不到，因為 id 不能重複
  
• 哪天換一顆燈，你要回去改 SVG
  

正確做法是在 YAML 裡把「實體」和「圖形」配對起來，下面會用到。

步驟 3：放一個最小的 CSS

同一個資料夾，建 www/floorplan/home.css：

1. /* 兩個房間的共同外框 */
2. #room-living, #room-bedroom {
3.   stroke: #3A4250;
4.   stroke-width: 3;
5.   cursor: pointer;
6. }
8. .room-name {
9.   font-family: "Microsoft JhengHei", "PingFang TC", sans-serif;
10.   font-size: 18px;
11.   font-weight: bold;
12.   fill: #344052;
13.   pointer-events: none;
14. }
16. /* 燈：先只有換色，動畫下一段才加 */
17. .light-off { fill: #F4F6FA; }
18. .light-on  { fill: #FFD54F; }
20. .alert-idle { opacity: 0; }

複製代碼

pointer-events: none 這一行不要省。房間名稱的文字疊在房間上面，沒有這一行的話，點到字的位置會點不到房間，使用者會覺得「有時候點得到有時候點不到」。

步驟 4：加卡片

儀表板 → 編輯 → 新增卡片 → 拉到最下面選 Floorplan Card → 右上角切到「顯示程式碼編輯器」，整份換成：

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

登入繼續閱讀使用 Google 登入