一份可以直接複製的 SVG 平面圖：SVG、CSS、YAML 三個完整檔案

charles · 發表於 2026-9-21 12:59:48

這篇的內容（15 段）

步驟 1：裝 ha-floorplan
步驟 2：建資料夾
步驟 3：貼上 home.svg
座標怎麼改成你家的
步驟 4：貼上 home.css
三個地方值得單獨講
一、r 一定要寫 px
步驟 5：貼上卡片設定
四個地方值得單獨講
二、state_action 可以是一個清單
步驟 6：驗收
怎麼改成你家的
手機上如果太卡
兩個儀表板並存的做法
幾個做完之後會想加的東西

這篇給你三個完整的檔案：平面圖本體、樣式、卡片設定。複製下去改掉實體 ID 就能用，不用自己從零畫。

成品會有：七個房間點下去開關燈、燈開的時候房間漸亮並帶柔光、大門開的時候門片轉開、人體感應是一圈一圈擴散的水波、漏水和瓦斯是閃爍的紅點、每個房間中央有溫度數字並依冷熱變色。

需要的東西：Home Assistant 加上 HACS，再加 ha-floorplan v1.2.0 以上（2026-07 發布）。這篇用到的「一條規則對應多組圖形」在 v1.2.0 才修好，舊版會有部分房間沒反應而且不報錯。

步驟 1：裝 ha-floorplan

HACS → 搜尋 floor → 找到 ha-floorplan → 下載
Ctrl+F5 清一次瀏覽器快取

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

看不到 → 去「設定 → 儀表板 → 右上角三點 → 資源」，確認有一筆 `/hacsfiles/ha-floorplan/floorplan.js`。

步驟 2：建資料夾

在 Home Assistant 的設定目錄底下建 www/floorplan/。

www 這個資料夾對外的網址是 /local/，這是 HA 的固定規則，不是打錯。所以 `www/floorplan/home.svg` 的網址是 `/local/floorplan/home.svg`。

最後的檔案結構只有兩個檔：

設定目錄/www/floorplan/
├── home.svg 平面圖本體
└── home.css 所有樣式和動畫

複製代碼

沒有別的了。這是 SVG 版本相對於圖片版本最大的差別 —— 不用準備一堆不同狀態的 PNG 圖層。

步驟 3：貼上 home.svg

用「檔案編輯器」應用程式或 Samba 建檔，整份貼進去：

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

登入繼續閱讀使用 Google 登入

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

一份可以直接複製的 SVG 平面圖：SVG、CSS、YAML 三個完整檔案

延伸閱讀

瀏覽過的版塊