跳轉到

建立 2026-09-14 更新 2026-09-14

換行、直排與常見坑

SVG 沒有 CSS 那種「區塊自動折行」。中文教材圖要會五件事：單行文字、<tspan> 換行、直排、置中、行距。組合起來就能做九成標題與標籤。

多行文字（最重要）

每一行用 <tspan>，並重設 x、用 dy 往下推：

<text x="100" y="100" font-size="18"
      font-family="Noto Sans TC, Microsoft JhengHei, sans-serif">
  <tspan x="100" dy="0">風險移轉</tspan>
  <tspan x="100" dy="40">（保險）</tspan>
</text>

dy 是相對上一行的位移，用來控制中文行距。置中時每個 tspan 都要寫同一個 x，並加上 text-anchor="middle"。

中文直排

<text x="300" y="100" writing-mode="vertical-rl" font-size="20">
  損失頻率
</text>

vertical-rl 是繁體直排常見寫法：字由上而下、行由右而左。適合圖右側的軸標或「教材風」邊欄。

可直接套用的教材範例

標題置中、右側直排、中間兩行標籤：

<svg width="600" height="400" viewBox="0 0 600 400"
     xmlns="http://www.w3.org/2000/svg"
     font-family="Noto Sans TC, Microsoft JhengHei, sans-serif">
  <rect width="600" height="400" fill="#fff8e1"/>

  <text x="300" y="50" text-anchor="middle" font-size="28" fill="#333">
    保險怎麼保？
  </text>

  <text x="550" y="120" writing-mode="vertical-rl" font-size="20" fill="#555">
    損失頻率
  </text>

  <text x="200" y="200" text-anchor="middle" font-size="18" fill="#333">
    <tspan x="200" dy="0">風險移轉</tspan>
    <tspan x="200" dy="25">（保險）</tspan>
  </text>
</svg>

保險怎麼保？ 損失頻率 風險移轉 （保險）

進階教材圖再疊上：

常見坑

不會自動換行

長句不會在框線內折行。一定要自己拆 <tspan>，或改把文字放在 HTML，SVG 只負責圖。

字型會跑版

不同系統預設中文字型寬度不同，直排與置中容易歪。講義與教材請寫：

font-family="Noto Sans TC, Microsoft JhengHei, sans-serif"

正式上線可考慮自架或 Google Fonts 的 Noto Sans TC，並在 CSS 裡統一設在 svg 上。

直排遇到括號與符號

（）、*、部分標點直排時方向或位置會怪，需要微調 dx / dy，或改成橫排小字。不要期待和 Word 直排完全一樣。

不能當 HTML 那樣排版

沒有 padding 盒模型、沒有 white-space: pre-wrap 的直覺行為。複雜說明文字優先用 HTML；SVG 只放標題、軸標、圖內短句。

一句話

用 <tspan> 手動排版，用 writing-mode 做直排。

若要做成「輸入文字 → 自動排版」的小工具，也是以這兩個機制為核心去算座標。

進一步學習