SVG 入门教程(六) 文本

添加文本	<nobr>第 1 页（共3 页）</nobr>

SVG 的强大能力之一是它可以将文本控制到标准 HTML 页面不可能有的程度，而无须求助图像或其它插件（后者会带来可访问性挑战）。任何可以在形状或路径上执行的操作（如绘制或滤镜）都可以在文本上执行。

一个不足之处是 SVG 不执行自动换行。如果文本比允许空间长，则简单地将它切断。多数情况下，创建多行文本需要多个文本元素。

可以使用 tspan 元素将文本元素分成几部分，允许每部分有各自的样式。在 text 元素中，空格的处理与 HTML 类似；换行和回车变成空格，而多个空格压缩成单个空格，如下面的早期示例所示：

xml 代码

1. xml version="1.0"?>  
3.   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
4. <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"  
5.                       xmlns:xlink="http://www.w3.org/1999/xlink">  
6.      
7.   <desc>Textdesc>  
8.   <defs>  
9.   defs>  
10.      
11.   <g>  
12.   
13.      <text x="20" y="50" font-size="30">  
14.         Colors can be specified   
15.      text>  
16.      <text x="20" y="100" font-size="30">by their   
17.         <tspan fill="rgb(255,0,0)">Rtspan>  
18.         <tspan fill="rgb(0,255,0)">Gtspan>  
19.         <tspan fill="rgb(0,0,255)">Btspan>  
20.      valuestext>  
21.      <text x="20" y="150" font-size="30">  
22.         or by keywords such as   
23.      text>  
24.      <text x="20" y="200" font-size="30">  
25.         <tspan fill="lightsteelblue">lightsteelbluetspan>,   
26.      text>  
27.      <text x="20" y="250" font-size="30">  
28.         <tspan fill="mediumseagreen">mediumseagreentspan>,   
29.      text>  
30.      <text x="20" y="300" font-size="30">and   
31.         <tspan fill="darkorchid">darkorchidtspan>.   
32.      text>  
33.   
34.   g>  
35. svg>  
36.   
37.   

 

使用 CSS 属性

<nobr>第 2 页（共3 页）</nobr>

实际上，所有的属性（对于所有元素，不仅是文本）都可以用级联样式表与一个元素关联，并且文本的所有 CSS 属性都在 SVG 图像中可用。

可以直接用样式属性设计元素的样式，或者引用样式表设计元素的样式。不应该解析样式表（因为它们偶尔包含会引起问题的字符），因此将它们置于 XML CDATA 节。

xml 代码

1. xml version="1.0"?>  
3.   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
4. <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">  
5.      
6.   <desc>Textdesc>  
7.   <defs>  
8.     <style type="text/css">  
9.        
10.       .abbreviation { text-decoration: underline; }  
11.       ]]>                      
12.     style>  
13.   defs>  
14.      
15.   <g>  
16.   
17.      <text x="20" y="50" font-size="30">Colors can be specifiedtext>  
18.      <text x="20" y="100" font-size="30">by their   
19.         <tspan fill="rgb(255,0,0)" class="abbreviation">Rtspan>  
20.         <tspan fill="rgb(0,255,0)" class="abbreviation">Gtspan>  
21.         <tspan fill="rgb(0,0,255)" class="abbreviation">Btspan>  
22.      valuestext>  
23.      <text x="20" y="150" font-size="30">or by keywords such astext>  
24.      <text x="20" y="200">  
25.         <tspan style="fill: lightsteelblue; font-size:30">  
26.            lightsteelblue   
27.         tspan>,   
28.      text>  
29. . . .   
30.   g>  
31. svg>  
32.   
33.   

 

路径上的文字

<nobr>第 3 页（共3 页）</nobr>

在纯 HTML 中不可能具有的一个 SVG 能力是将文本沿路径排列。要实现这一点，需创建一个链接到预定义的路径信息的 textPath 元素：

xml 代码

1. xml version="1.0" standalone="no"?>  
3.   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
4. <svg width="400" height="300" xmlns="http://www.w3.org/2000/svg"  
5.                       xmlns:xlink="http://www.w3.org/1999/xlink">  
6.   <desc>Text on a pathdesc>  
7.   <defs>  
8.      <path id="wavyPath"    
9.          d="M75,100 c25,-75 50,50 100,0 s50,-50 150,50"/>  
10.   defs>  
11.   <rect x="1" y="1" width="398" height="200"  
12.         fill="none" stroke="blue" />  
13.   
14.   <text x="50" y="50" font-size="14">  
15.      <textPath xlink:href="#wavyPath">  
16.        Text travels along any path that you define for it.   
17.      textPath>  
18.   text>  
19.   
20. svg>  
21.   
22.