SVG 寫 width=1 height=1 overflow=visible 當純座標系容器
當 SVG 只是「形狀的容器」、布局完全交給外層處理時，把 SVG 自己縮成 1×1 並設 overflow="visible"，等於告訴瀏覽器：「我不參與 layout，但裡面的元素照常畫，超出我邊界也別 clip」。
做法
<svg className="ic-svg" width="1" height="1" overflow="visible">
<rect x={100} y={100} width={200} height={200} />
{/* 其他形狀... */}
</svg>為什麼這樣寫
SVG 預設行為很煩：
- 預設
width=300 height=150，會佔位、會 layout - 超出 SVG 邊界的形狀預設被 clip
- 想顯示任意大小的內容，得算 viewBox、算 width/height、外加 layout 配合
當你只想拿 SVG 來畫形狀（座標、線條、複雜路徑），不想它影響任何 layout：
width="1" height="1"→ 幾乎不佔空間overflow="visible"→ 解除 clip，形狀想畫多大畫多大- 結果：SVG 變成一個「透明畫布」，純粹當形狀容器用
適合場景
- 無限畫布（外層 div 控制縮放/平移、SVG 只負責畫形狀）
- 在頁面上疊浮動的連線、註解、標註
- 任何「形狀位置由外部座標系統決定」的情境
為什麼不直接用 <canvas>
<svg> 比 <canvas> 在這類用途好的地方：
- DOM 可選取：每個形狀是真實節點，能掛 event、可被 React 管理
- 無限縮放不糊：vector 天生 resolution-independent
- 可被 CSS transform 加速合成：跟外層 div 一起被 GPU 縮放
- 可訪問性、可序列化：純文字標記
代價是大量元素時不如 canvas 快（破萬就明顯）。中等規模（千個以下）SVG 勝在開發體驗。