iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 25
2
Modern Web

鉄人28号FX系列 第 25

鉄人28号FX 鉄人25号「圖形鹿」SVG <text> <tspan>

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

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

顯示雷奧鎮街上位置圖

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

蛤? 村長!!

:快跟上來吧!!!
如果你想解開這一切。


★★★ 關卡條件 ↓↓↓

圖形文本 (SVG text, tspan)

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

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

text-anchor

  • text-anchor:屬性應用於給定 <text> 元素內的每個單獨的文本框,並對應一個初始的當前文本位置,該位置由(取決於上下文)元素上的 xy 屬性認定。
    • 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 軸位置垂直移動文本。

tspan

<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
    • subdominant-baseline 移至下標的默認位置。
    • superdominant-baseline 移至上標的默認位置。
    • <length-percentage>:如為正值,dominant-baselineshift 同方向移動結果值;如為負值,dominant-baselineshift 反方向移動結果值。0 值同等於基準線。

baseline-shift

<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),將作用於多出的字符數。

rotate

<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 釋出。


上一篇
鉄人28号FX 鉄人24号「影隨者」text-shadow
下一篇
鉄人28号FX 鉄人26号「路徑鳥」SVG <path> <textPath> <defs>
系列文
鉄人28号FX30

1 則留言

0
Askie Lin
iT邦新手 5 級 ‧ 2019-10-10 18:18:33

今天的哥,沒有極限。

哈哈。Askie 看的好細,感謝捧場

我要留言

立即登入留言