Web Chart 入門（5-2）：draw2d Label 縮放異常問題排查與解決

問題描述

使用 Canvas setZoom 縮放畫布時，Chrome 下 Label 文本縮小反而變大，Circle/Rectangle 正常。Firefox 表現正常。

排查過程

1. 檢查生成的 SVG 結構

Chrome DevTools 顯示 Label 最終渲染為：

<a ...>
  <text ... font-size="10px" ... transform="matrix(1,0,0,1,5007,4846.5)">
    <tspan dy="3.5">Label Text</tspan>
  </text>
</a>

發現字體大小受 transform="matrix(...)" 控制，而非 font-size 屬性。

2. 驗證 Raphael 原生是否存在相同問題

編寫獨立 Raphael 測試頁，使用 paper.setViewBox 模擬縮放，現象完全一致：Chrome 下縮小時文本變大，Firefox 正常。確認是 Raphael/瀏覽器層面問題。

3. 定位到 Chrome 最小字體限制

搜索「Chrome 12px」發現：Chrome 設置中有「字體大小下限」，默認 12px。縮放導致計算字體小於 12px 時，瀏覽器強制渲染為 12px，視覺上反而比周圍縮放後的圖形大。

解決方案

方案一：修改瀏覽器設置（用戶端）

Chrome 設置 → 顯示高級設置 → 網頁內容 → 自定義字體 → 將「字體大小下限」調小（如 10px 或更小）。

方案二：CSS 嘗試（開發端，實測無效）

text, tspan { -webkit-text-size-adjust: none; }

實測：生成的 SVG 已包含此樣式但無效，因為 Chrome 對 SVG 文本的最小字體限制優先級高於 CSS。

結論

• 此非程序 Bug，而是 Chrome 瀏覽器「最小字體大小」機制導致。
• 開發端無法通過代碼完全繞過（除非用戶修改瀏覽器設置）。
• 繞過建議：設計時避免極小字體場景，或在縮放至某閾值時改用圖標/簡化標籤代替文本。