SVG 入门教程(六) 文本

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

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

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

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

xml 代码

<!---->xml version="1.0"?>
<!---->
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink">

  <desc>Textdesc>
  <defs>
  defs>

  <g>

     <text x="20" y="50" font-size="30">
        Colors can be specified
     text>
     <text x="20" y="100" font-size="30">by their
        <tspan fill="rgb(255,0,0)">Rtspan>
        <tspan fill="rgb(0,255,0)">Gtspan>
        <tspan fill="rgb(0,0,255)">Btspan>
     valuestext>
     <text x="20" y="150" font-size="30">
        or by keywords such as
     text>
     <text x="20" y="200" font-size="30">
        <tspan fill="lightsteelblue">lightsteelbluetspan>,
     text>
     <text x="20" y="250" font-size="30">
        <tspan fill="mediumseagreen">mediumseagreentspan>,
     text>
     <text x="20" y="300" font-size="30">and
        <tspan fill="darkorchid">darkorchidtspan>.
     text>

  g>
svg>

 

使用 CSS 属性

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

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

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

xml 代码

<!---->xml version="1.0"?>
<!---->
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">

  <desc>Textdesc>
  <defs>
    <style type="text/css">
      <!---->
      .abbreviation { text-decoration: underline; }
      ]]>
    style>
  defs>

  <g>

     <text x="20" y="50" font-size="30">Colors can be specifiedtext>
     <text x="20" y="100" font-size="30">by their
        <tspan fill="rgb(255,0,0)" class="abbreviation">Rtspan>
        <tspan fill="rgb(0,255,0)" class="abbreviation">Gtspan>
        <tspan fill="rgb(0,0,255)" class="abbreviation">Btspan>
     valuestext>
     <text x="20" y="150" font-size="30">or by keywords such astext>
     <text x="20" y="200">
        <tspan style="fill: lightsteelblue; font-size:30">
           lightsteelblue
        tspan>,
     text>
. . .
  g>
svg>

 

路径上的文字

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

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

xml 代码

<!---->xml version="1.0" standalone="no"?>
<!---->
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Text on a pathdesc>
  <defs>
     <path id="wavyPath"
         d="M75,100 c25,-75 50,50 100,0 s50,-50 150,50"/>
  defs>
  <rect x="1" y="1" width="398" height="200"
        fill="none" stroke="blue" />

  <text x="50" y="50" font-size="14">
     <textPath xlink:href="#wavyPath">
       Text travels along any path that you define for it.
     textPath>
  text>

svg>