SVG文本 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　本文將詳細介紹SVG文本相關內容

位置屬性

　　在一個SVG文檔中，使用<text>元素來設置文本，<text>元素有x、y、dx、dy這四個位置屬性

【x和y】

　　屬性x和屬性y性決定了文本在視口中顯示的位置

<text x="30" y="30">Hello World!</text>

　　可以只設置y屬性，此時x屬性默認為0

　　[注意]如果不設置y屬性，則文本將不會顯示

<text  y="30">Hello World!</text>

【dx和dy】

　　屬性dx和dy用于設置文本相對于當前位置的偏移量

<svg version="1.1" height="70" xmlns="http://www.w3.org/2000/svg">
  <text x="30" y="30">Hello World!</text>
  <text x="30" y="50" dx="10">Hello World!</text>
</svg>

　　如果dx或dy的值是多個值，則從第二個值開始，表示文本內字符的間距

<svg version="1.1" height="70" xmlns="http://www.w3.org/2000/svg">
  <text x="30" y="30">Hello World!</text>
  <text x="30" y="50" dx="10 10 20 30 40">Hello World!</text>
</svg>

對齊屬性

【水平對齊】

　　屬性text-anchor用來設置水平對齊，取值包括：start、middle、end或inherit

<svg version="1.1" width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <polyline points="160 80, 160 20, 300,20" fill="transparent" stroke="black"/>
  <text x="160" y="20" text-anchor="start">小火柴的藍色理想</text>
  <text x="160" y="50" text-anchor="middle">小火柴的藍色理想</text>
  <text x="160" y="80" text-anchor="end">小火柴的藍色理想</text>
</svg>

【垂直對齊】

　　屬性dominant-baseline可以設置垂直對齊，包括以下屬性

樣式屬性

　　和形狀元素類似，屬性fill可以給文本填充顏色，屬性stroke可以給文本描邊，也可以引用漸變或圖案

　　對于字體相關屬性，下列每個屬性可以被設置為一個SVG屬性或者成為一個CSS聲明：font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing和text-decoration

<svg version="1.1" height="30" xmlns="http://www.w3.org/2000/svg">
  <text y="20" font-size="20px" font-weight="bold" stroke="red" fill="transparent">Hello World!</text>
</svg>

tspan

　　tspan元素用來標記大塊文本的子部分，它必須是一個text元素或別的tspan元素的子元素。一個典型的用法是把句子中的一個詞變成粗體

  <text x="10" y="50">
    <tspan font-weight="bold">小火柴</tspan>的藍色理想
  </text>

【自定義屬性】

　　tspan元素有以下的自定義屬性

　　x 為容器設置一個新絕對x坐標。它覆蓋了默認的當前的文本位置。這個屬性可以包含一個數列，它們將一個一個地應用到tspan元素內的每一個字符上

　　dx 從當前位置，用一個水平偏移開始繪制文本。這里，可以提供一個值數列，可以應用到連續的字體，因此每次累積一個偏移

　　類似地，還有y和dy

　　rotate 把所有的字符旋轉一個角度。如果是一個數列，則使每個字符旋轉分別旋轉到那個值，剩下的字符根據最后一個值旋轉

　　textLength 這是一個很模糊的屬性，給出字符串的計算長度。它意味著如果它自己的度量文字和長度不滿足這個提供的值，則允許渲染引擎精細調整字型的位置

<svg version="1.1" height="30" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="20">
    小火柴的<tspan x="100" dx="0 10 10 10" rotate="30" font-weight="bold">藍色理想</tspan>
  </text>
</svg>

textPath

　　該元素利用路徑文本textPath的xlink:href屬性取得一個任意路徑，把字符對齊到路徑，于是字體會環繞路徑、順著路徑走

　　[注意]如果給出的路徑長度不夠長，則超出部分不會被渲染出來

　　渲染原理如下圖所示

　　下面是一個例子

<svg version="1.1" width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <path id="my_path" d="M 20,20 C 50 50, 160 50, 160 20" fill="none"/>
  <text>
    <textPath xlink:href="#my_path">小火柴的藍色理想</textPath>
  </text>
</svg>

【屬性】

　　使用textPath后，text元素的x和y屬性的含義有所改變

x 路徑位置
y 無效

　　textPath只有一個startOffset屬性，用來確定排列起始位置

波浪文字

　　下面使用SVG，來實現波浪文字的效果。由于<text>標簽的dx、dy屬性可以控制文本間的間距。因此，可以通過定時器動態的修改他們的值，將其呈現出動態波浪文字的效果

<svg version="1.1" width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <text id="sinText" x="10" y="50">小火柴的藍色理想小火柴的藍色理想</text>
</svg>
<br>
<button id="btn1">開始運動</button>
<button id="btn2">暫停運動</button>
<script>
//n為文本的數量
var n = sinText.innerHTML.length;
//x和y分別儲存dx和dy的值
var x = [],y = [];
//設置x的值
for(var i = 0; i < n; i++){
  x.push(2*Math.PI/n);
}
function arrange(t){
  //清空數組
  y = [];
  var ly = 0,cy;
  for(i = 0; i < n; i++){
    //計算當前的曲線的cy值
    cy = -20*Math.sin(0.5*i+t);
    //將y的差值保存到數組中
    y.push(cy-ly);
    //保存上一個y的值
    ly = cy;
  }
}
function render(){
  //將x、y數組中的值渲染到dx、dy中
  sinText.setAttribute('dx',x.join(' '));
  sinText.setAttribute('dy',y.join(' '));
}
(function init(){
  arrange(0);
  render();  
})();
var t = 0; 
var oTimer = null;
function frame(){
  t +=0.1;
  arrange(t);
  render();
  oTimer =  requestAnimationFrame(frame);
}
btn1.onclick = function(){
  cancelAnimationFrame(oTimer);
  oTimer =  requestAnimationFrame(frame);
}
btn2.onclick = function(){
  cancelAnimationFrame(oTimer);
}
</script>