2007-11-17

SVG 入门教程(六) 文本

添加文本 第 1 页（共3 页）


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 属性 第 2 页（共3 页）


实际上，所有的属性（对于所有元素，不仅是文本）都可以用级联样式表与一个元素关联，并且文本的所有 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.   

 

路径上的文字 第 3 页（共3 页）


在纯 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.   

 

 

 

 
评论
发表评论

您还没有登录，请登录后发表评论

jacally
搜索本博客
我的相册
5225c084-f830-3bfb-89b4-e391c07b2221-thumb
flexlib6-1.jpg
共 27 张
最近加入圈子
存档
最新评论