TP Notes: SVG 的文字

以前自己開發繪圖函式庫時，字都是自己畫，一開始是抓倚天中文的字形檔，後來用自己的方式產生自己的字形檔，並加上 alpha 來做反鋸齒，當時還為了開發泰國版本，自行設計泰文輸入法，雖然可以使用 truetype 字形，但是當時硬體規格太差，為了速度，還是要自己寫效率比較高，現在看到 SVG 文字相關的定義，真的覺得當初自己所想到的功能太陽春，SVG 的規劃要完整多了。

## text 的參數如下：
```css
x,y                座標
dx,dy              偏移
rotate             旋轉
lengthAdjust       spacing (預設) 字與字之間以空白做間隔
                   spacingAndGlyphs  字與字之間以變形填滿
textLength         字串長度
text-anchor        start , middle , end 文字定位

以下參數也可以做為 CSS 的參數
  
dominant-baseline  auto (預設)
                   text-bottom
                   alphabetic
                   ideographic
                   middle
                   central
                   mathematical
                   hanging
                   text-top
writing-mode       horizontal-tb
                   vertical-rl
                   vertical-lr  
```

先來一個簡單範例

```
$mmcode(r1)
```

可以發現，SVG 的字完全就是用畫的，像多邊形一樣，所以右邊的文字有加上 `stroke-linejoin="round"` 在角落的地方就成了圓角

文字處理另一個麻煩的就是基準線，這裡使用的是 dominant-baseline ，可以當作參數，也可以當作 CSS 使用

CSS 的文字有個很特別的設計，利用類似陣列的方式為每一個字設定屬性
```
$mmcode(r3)
```
<div class="mmresult r3">
<svg width="300" height="100" style="background-color:#ffa">
<text x="10,20,40,80,150" y="60,70,50" fill="#000" style="font-size:32px;">abcde</text>
</svg>
</div>

也可以用 dx 和 dy 做偏移

```
$mmcode(r4)
```
<div class="mmresult r4">
<svg width="300" height="100" style="background-color:#ffa">
<text x="10" y="60" dx="0,10,20,30,40" dy="0,10,20,-40" fill="#000" style="font-size:32px;">abcde</text>
</svg>
</div>

可以用 rotate 旋轉, 而旋轉預設的中心點在左下角

```
$mmcode(r5)
```
<div class="mmresult r5">
<svg width="300" height="100" style="background-color:#ffa">
<text x="10" y="60" rotate="0,30,60,90,-40,0,0,90,-90" fill="#000" style="font-size:32px;" >abcde ddd</text>
</svg>
</div>

textLength 和 lengthAdjust 搭配，設定字串長度後，看要用空白還是變形的方式填空間
```
$mmcode(r6)
```
<div class="mmresult r6">
<svg width="320" height="200" viewBox="0 0 420 200" style="background-color:#ffa">
<text x="10" y="40" textLength="300" lengthAdjust="spacing" fill="#000" style="font-size:32px;" >abcde</text>
<text x="10" y="80" textLength="300" lengthAdjust="spacingAndGlyphs" fill="#000" style="font-size:32px;" >abcde</text>
<text x="10" y="120" textLength="60" lengthAdjust="spacingAndGlyphs" fill="#000" style="font-size:32px;" >abcde</text>
<text x="360" y="20" textLength="140" lengthAdjust="spacingAndGlyphs" fill="#000" style="font-size:32px;writing-mode:vertical-lr" >直寫測試123</text>
</svg>
</div>

# tspan
  
當一段文字想要有不同設定時，可以用 tspan ，就如同 css 的 span 一樣，搭配 dominant-baseline 就可以做到上標字和下標字的效果，
  
<font style="color:#f00;font-size:1.5em">*經實測結果 Firefox 會不正常顯示</font>，以下正確結果應該顯示為 <font style="color:#00f;font-size:1.5em">X₂＋Y²＝Z⁽²ⁿ⁺¹⁾</font>

```
$mmcode(r7)
```
<div class="mmresult r7">
<style>
.a112707_central
{
  dominant-baseline:central;
}
.a112707_up
{
  font-size:0.6em;
  dominant-baseline:auto;
}
.a112707_down
{
  font-size:0.6em;
  dominant-baseline:hanging;
}
</style>
<svg width="320" height="200" style="background-color:#ffa">
<text x="10" y="40" fill="#000" style="font-size:32px;" >abc<tspan fill="#f00">123</tspan>def<tspan style="font-size:48px">def</tspan>ghi</text>
<text x="10" y="100" fill="#000" style="font-size:32px;" class="a112707_central">
X
<tspan class="a112707_down">2</tspan>
+Y
<tspan class="a112707_up">2</tspan>
=Z
<tspan class="a112707_up">(2n+1)</tspan>
</text>
</svg>
</div>

如果要完全相容的上標和下標字，似忽只有利用 dy 來實作，但是這個缺點就是，沒辦法單純用 css 來完成，而且 `<tspan>` 的定義很奇怪，一但 dy 改變了，就是改變了，並不會在 `</tspan>` 時變回來，所以在使用上標字(dy 減去某個值) ，必須在下一個顯示的字把 dy 的值加回來。

```
$mmcode(r8)
```
<div class="mmresult r8">
<style>
.a112708_normal
{
  font-size:1em;
}
.a112708_up
{
  font-size:0.6em;
}
.a112708_down
{
  font-size:0.6em;
}
</style>
<svg width="320" height="100" style="background-color:#ffa">
<text x="10" y="60" fill="#000" style="font-size:32px;" >
<tspan class="a112708_normal">X</tspan>
<tspan class="a112708_down" >2</tspan>
<tspan class="a112708_normal">+Y</tspan>
<tspan class="a112708_up" dy="-1em">2</tspan>
<tspan class="a112708_normal" dy="0.6em">=Z</tspan>
<tspan class="a112708_up" dy="-1em">(2n+1)</tspan>
</text>
</svg>
</div>
  
為了處理上標和下標問題，只好利用 javascript 來協助，加上 svgsup 和 svgsub 兩個 class ，由 javascript 來處理 dy 的問題，程式碼很簡單，效果也不錯
  
```
$mmcode(svgsup)
```  
<div class="mmresult svgsup">
<style>
.svgsup,.svgsub
{
  font-size:0.6em;
}
</style>
<svg width="320" height="100" style="background-color:#ffa">
<text x="10" y="60" fill="#000" style="font-size:32px;">
<tspan>X</tspan>
<tspan class="svgsub">2</tspan>
<tspan>+Y</tspan>
<tspan class="svgsup">2</tspan>
<tspan>=Z</tspan>
<tspan class="svgsup">(2n+1)</tspan>
</text>
</svg>

# textPath
  
SVG 有個有趣的東西叫 textPath ，文字可以隨著路徑跑，這個功能當初我在設計網頁上的向量地圖時曾經用來顯示路名

當初在寫導航程式顯示路名時，字隨路徑走是用比較偷懶的方式，計算出每個字的座標，但是字不會旋轉，隨著現在硬體規格越來越強，加上 SVG 有這麼方便的指令，要開發 2D 地圖真的簡單多了。

```
$mmcode(r9)
```
<div class="mmresult r9">
<svg width="320" height="200" viewBox="0 0 400 200" style="background-color:#ffa">
<defs>
  <path id="a112709_p1" d="M20,100 Q100,0 200,100 Q300,200 380,100"/>
</defs>
<use xlink:href="#a112709_p1" fill="none" stroke="#fa0" stroke-width="2"/>
<text fill="#000" style="font-size:24px;">
  <textPath href="#a112709_p1">文字可以隨著路徑跑
  </textPath>
</text>
</svg>
<br><br>
<svg width="320" height="200" viewBox="0 0 400 200" style="background-color:#ffa">
<use xlink:href="#a112709_p1" fill="none" stroke="#fa0" stroke-width="2"/>
<text fill="#000" style="font-size:24px;">
  <textPath href="#a112709_p1" startOffset="100">startOffset="100"
  </textPath>
</text>
</svg>
<br><br>
<svg width="320" height="200" viewBox="0 0 400 200" style="background-color:#ffa">
<use xlink:href="#a112709_p1" fill="none" stroke="#fa0" stroke-width="2"/>
<text fill="#000" style="font-size:24px;">
  <textPath href="#a112709_p1">可以使用<tspan fill="#f0f" dy="-20" style="font-size:32px">tspan</tspan><tspan dy="20" fill="#00f">來做效果</tspan>
  </textPath>
</text>
</svg>
<br><br><font color="#f00"><b>這個設定在 iPhone 及 safari 沒用</b></font><br>
<svg width="320" height="200" viewBox="0 0 400 200" style="background-color:#ffa">
<use xlink:href="#a112709_p1" fill="none" stroke="#fa0" stroke-width="2"/>
<text fill="#000" style="font-size:24px;" dominant-baseline="central">
  <textPath href="#a112709_p1">dominant-baseline="central"
  </textPath>
</text>
</svg>
<br><br>
<svg width="320" height="200" viewBox="0 0 400 200" style="background-color:#ffa">
<use xlink:href="#a112709_p1" fill="none" stroke="#fa0" stroke-width="2"/>
<text fill="#000" style="font-size:24px;writing-mode:vertical-lr;">
  <textPath href="#a112709_p1">直式書寫 writing-mode:vertical-lr;
  </textPath>
</text>
</svg>

</div>

文字可以隨著路徑跑，那麼是不是可以取得路徑長度後，計算每個字的間距，讓字平均分布呢 ?

方法如下 :
  
```
  let pp  = document.getElementById("[path 的 ID]");
  let len = pp.getTotalLength(); //取得路徑總長度
  let xy  = pp.getPointAtLength(500); //取得距離 500 的點位 , return {x:n,y:m}
  let box = pp.getBBox(); //取得路徑範圍 , return {x:n,y:n,width:n,height:n}
  
```

取得長度後就可以計算平均分布的位置  
  
```
$mmcode(r10)
```

<div class="mmresult r10">
<svg width="300" height="300" style="background-color:#ffa">
<defs>
  <path id="a112710_p1" d="M30,150 a1,1,0,0,1,240,0 a1,1,0,0,1,-240,0"></path>
</defs>
<use xlink:href="#a112710_p1" fill="none" stroke="#fa0" stroke-width="2"></use>
<text fill="#000" style="font-size:24px;">
  <textPath href="#a112710_p1">
    <tspan id="a112710_txt">文字可以隨著路徑跑喲</tspan>
  </textPath>
</text>
</svg>
<script>
$(function()
{
  let pp = document.getElementById("a112710_p1");
  let len = pp.getTotalLength();
  let txt=$("#a112710_txt");
  let txtlen=txt.html().length;
  let i;
  let hh="";
  let j=len/txtlen;
  for (i=0;i<txtlen;i++)
  {
    hh+=j*i+" ";
  }
  txt.attr("x",hh);  
})
</script>  
</div>

TP Notes

Translate

2020年11月27日星期五

SVG 的文字

沒有留言:

張貼留言

Translate

2020年11月27日 星期五

SVG 的文字

沒有留言:

張貼留言

2020年11月27日星期五