★ 地圖雷奧鎮市中心 ↓↓↓

真不可思議～
明明普通不過的街景，
為何隱藏這麼多無法理解的事情。

顯示雷奧鎮街上位置圖

雷奧鎮小巷 [？？？]：
小子。果然村長擔心的沒錯。

蛤？ 村長！！

：快跟上來吧！！！
如果你想解開這一切。

★★★ 關卡條件 ↓↓↓

圖形文本 (SVG text, tspan)

SVG <text> 元素繪製一個由文本組成的圖形元素。可以將漸變，圖案，剪切路徑，遮罩或濾鏡應用於其中。文本需包含在 <text> 元素內，才能正常運作。

• x：文本基準線為起點的 x 坐標。(水平座標絕對位置)
• y：文本基準線為起點的 y 坐標。(垂直座標絕對位置)

• text-anchor：屬性應用於給定 <text> 元素內的每個單獨的文本框，並對應一個初始的當前文本位置，該位置由（取決於上下文）元素上的 x 和 y 屬性認定。
  • Value: start | middle | end。
• stroke：定義繪製形狀輪廓的顏色，none 為初始值。如設置了 stroke 屬性，將填充輪廓線，文字呈現偽粗體狀態。(例 Ideas)
• fill：初始值為 black，如設置其屬性值為none，並填充stroke 屬性值，則呈現中空文字。(例 Studio)

<svg>
  <text x="0" y="40" text-anchor="middle" fill="orangered">Good</text>
  <text x="0" y="90" text-anchor="start" fill="steelblue" stroke="steelblue" stroke-width="3">Ideas</text>
  <text x="0" y="140" text-anchor="end" fill="none" stroke="saddlebrown" stroke-width="1">Studio</text>
</svg>

body {
  text-align: center;
}
svg {
  overflow: visible;
  font-size: 40px;
  font-weight: bold;
  background: #eee;
  border-left: 1px dotted #555;
}

雷奧鎮小巷 [圖形鹿]：
能順利走到這，也算不容易。
我們兄弟倆，就賣個人情，幫幫你一把。

接下來，看好了：

<tspan>

如果要實現在一段文本中，讓部分文字呈現出不同樣式，透過 <tspan> 元素，以其 <text> 元素初始位置作為起點 (0,0)，可達到局部偏移或其它指定效果。

• dx：從上一個文本元素 x 軸位置水平移動文本。
• dy：從上一個文本元素 y 軸位置垂直移動文本。

<svg>
  <text x="0" y="40">Tetsujin
    <tspan dx="-165" dy="30">28</tspan>
    <tspan dx="-10" dy="-65">FX</tspan>
  </text>
  <text x="50,70,100,130,153" y="70,80,75,65,70" style="font-size:24px;">
    Gigantor
  </text>  
</svg>

body { text-align: center; margin-top: 40px; }
svg { overflow: visible; font-size: 40px; font-weight: bold;
      font-family: didot; fill: #666; }
tspan:first-child { font-size: 130px; fill: orangered; opacity: 0.5; }

• baseline-shift：相對於父文本內容元素的 dominant-baseline 重新定位 dominant-baseline。
  • sub：dominant-baseline 移至下標的默認位置。
  • super：dominant-baseline 移至上標的默認位置。
  • <length-percentage>：如為正值，dominant-baseline 向 shift 同方向移動結果值；如為負值，dominant-baseline 向 shift 反方向移動結果值。0 值同等於基準線。

<svg>
  <text x="10" y="30">
    (a ± b)<tspan baseline-shift="super">2</tspan> 
    = a<tspan baseline-shift="super">2</tspan>     
    ± 2ab + b<tspan baseline-shift="super">2</tspan>
  </text>
</svg>

svg { overflow: visible; font-size: 2em; font-family: monospace; }
tspan { font-size:1rem; font-weight: bold; }

雷奧鎮小巷 [圖形鹿]：
完全可以按照你想要的進行！！
今天的哥，沒有極限。

• rotate：每個文字可單獨旋轉其方向。
  Gigantor 共八個字符，dx, dy, rotate 各別帶有七個數值 (空格或半形逗號分隔其值)，每個數值相對應有次序字母並對其旋轉。如 dx(同等 dy, rotate) 共帶有 7 個有效值，小於 <tspan> 內 Gigantor 八個字符，dx(同等 dy, rotate) 末位有效值 (3)，將作用於多出的字符數。

<svg>
  <text x="10" y="30">
    Tetsujin
    <tspan dx="0 4 3 5 -2 -1 3" dy="3 -3 7 -3 -2 -8 4" rotate="5 10 -5 -20 20 -10 0">
      Gigantor
    </tspan>
    28 FX
  </text>
</svg>

svg { overflow: visible; font-size: 2em; font-family: monospace; }
tspan { font-weight: bold; }

天阿！！

：竟然可以操控到如此地步。
真是太強大了！！

To Be Continued ...

[ 追加經驗值 ]
註：參考來源 w3.org SVG text
SVG 研究之路
關於 MDN 由 Mozilla Contributors 製作，以 CC-BY-SA 2.5 釋出。