x,y属性决定文字的位置.＜text＞默认为文字居左对齐.也就是文字的轴线在文字的最左边线,图中,取轴线为x=0,与画布的最左边线一致,我们看到文字居左对齐.

(另:关于中文字体以及编码格式,我们将在以后的专题中再做讨论.目前范例仍然使用默认的英文字体.)
-------------------------------------------------------------------------------------------------------
2. 文字居中对齐
  
  
  
源代码:
  
＜?xml version="1.0" encoding="utf-8"?＞
＜!-- Author : Blueknight,Hangzhou,China 2000 --＞
＜svg width="50" height="50"＞
＜text x="50" y="13" style="fill: red; text-anchor: middle"＞
SVG
＜/text＞
＜/svg＞

  
  
讲解:
  
居中对齐也就是文字的轴线在文字的中心.图中取x=50为轴线,我们很清楚的看到,轴线落在文字的中心.(另半边由于落在图像画布外,所以没有显示.)

居中对齐使用了text-anchor: middle这一属性.
--------——————————————————————————————————————-

3. 文字居右对齐
  
  
  
源代码:
  
＜?xml version="1.0" encoding="utf-8"?＞
＜!-- Author : Blueknight,Hangzhou,China 2000 --＞
＜svg width="50" height="50"＞
＜text x="50" y="13" style="fill: red; text-anchor: end"＞
SVG
＜/text＞
＜/svg＞

  
  
讲解:
  
居右对齐也就是文字的轴线在文字的最右边线.图中取x=50为轴线,与画布的最右边线一致.我们很清楚的看到,轴线落在文字的最右边.

居中对齐使用了text-anchor: end这一属性.
————————————————————————————————————
文 字（2)
  
  
4. 分行显示
  
  
  
源代码:
  
＜?xml version="1.0" encoding="utf-8"?＞
＜!-- Author : Blueknight,Hangzhou,China 2000 --＞
＜svg width="50" height="50"＞
＜text x="0" y="13" style="fill: red"＞
Line 1
＜tspan x="0" dy="0.5cm"＞Line 2＜/tspan＞
＜/text＞
＜/svg＞

  
  
讲解:
  
文字的分行显示主要利用了＜tspan＞＜/tspan＞标签.tspan用于对文字的显示进行单独的控制.范例使用的dy属性是一个纵向相对位移值,它用于区分上下两行文字间的纵向相对位移.您可以试着将dy属性删去,此时会发现line1被line2覆盖而无法显示.tspan除了dy,还有x,y,dx,dy,rotate,textlength等属性.
——————————————————————————————————————

5. 文字路径
  
  
  
源代码:
  
＜?xml version="1.0" encoding="utf-8"?＞
＜!-- Author : Blueknight,Hangzhou,China 2000 --＞
＜svg width="100" height="50"＞
＜defs＞
＜path id="textPath" d="M10 50 C10 0 90 0 90 50" /＞
＜/defs＞
＜text style="fill: red; text-anchor:middle"＞
＜textPath xlink:href="#textPath"＞
Text on a Path
＜/textPath＞
＜/text＞
＜/svg＞

  
  
讲解:
  
制作文字路径首先需要对路径进行声明定义(绿色部分).

在文字中,使用＜textpath＞＜/textpath＞标签,并利用前面介绍的xlink调用方法完成文字附着路径动作.