html5 svg 第八章 文字text

虽然它多是真实的，每个画面讲述了一个故事，这是彻底正确的，用言语来帮助讲故事。所以，SVG有几个元素，让你将文本添加到您的图形。

文本术语 Text Terminology

 

在咱们调查的主要方法添加文本，的<TEXT>元素以前，咱们应该定义一些术语，你会看到，若是你读了SVG规范，或者若是你的工做与文字在任何图形环境：

字符

一个字符，做为一个XML文档而言，是一个数值，根据Unicode标准的一个字节或字节。举例来讲，就是咱们所说的字母“G”是字符的Unicode值103。

雕文

字形是可见的一个或几个字符表示。一个字符能够有许多不一样的字形来表明它。 图8-1显示了“两套不一样的字形-特别是在最初的”G“字形” -这是相同的字符，但字形明显不一样

两套字形(glyphs  glyphs)

 

多个字符，能够减小单个字形，有些字体有独立的字形，字母组合“FL”和“FF”，以使他们的间距看起来更好（这些被称为连字）。其余时间，能够单个字符组成的多个字形打印程序可能会形成字符E（Unicode值233）与非间距重音符号“'”相结合的“e”字形。

字形

字形的集合表明一个特定的字符集。全部字体中的字形，通常都有如下共同的特色：

 

基线，上升和降低Baseline, ascent, and descent

全部的字形字体线基线。的距离从基线到字符顶部的提高，从基线到字符的底部的距离是降低。的字符的总高度也被称为电磁高度The total height of the character is also called the em-height.。烯框中，而后是一个正方形，有做为烯高度的宽度同样大。

上虚线在图8-2是用来肯定帽的高度，这是一个大写字母在基线以上的高度。的较低的虚线是用来肯定前的高度，其中，逻辑的是，从基线到小写字母“×的顶部的距离是。

 

简单的属性和属性的文本元素

<text>元素最简单的形式，只须要两个属性x和y，它定义了元素的内容的第一个字符的基线baseline被放置的位置,文本的默认样式是有黑色，没有轮廓的填充颜色。事实证实这真实你想要的文本颜色。若是你设置的轮廓，以及做为填充，文字看起来不舒服厚。若是您只设置的轮廓，你能够获得一个至关愉快的字形轮廓，特别是若是你下降中风的宽度。例8-1 <文本>使用的位置和中风/填充特性，其结果是图8-3。

例8-1。文字布局和概述

 

<!-- guide lines -->
<path d="M 20 10, 20 120 M 10 30 100 30 M 10 70 100 70
   M 10 110 100 110" style="stroke: gray;"/>

<text x="20" y="30">Simplest Text</text>
<text x="20" y="70" style="stroke: black;">Outlined/filled</text>
<text x="20" y="110" style="stroke: black; stroke-width: 0.5;
    fill: none;">Outlined only</text>

许多其余属性应用于文本的相同的，由于他们是"层叠样式表"标准中。下面是 in the Apache Batik viewer version 1.0中实现css属性和值的列表

 

字体家庭font-family

   该值是一个空白分隔的列表的字体系列名称或通用的姓氏。通用的家族名是衬线字体，无衬线和等宽。不多有衬线字体笔画的两端的“挂钩”不无衬线字体。在图8-1中，字的左边是一个serif字体和字，右边是无衬线字体。衬线和无衬线字体是成正比的，一个大写M的宽度为一，资本等宽字体，可能会或可能不会有衬线之一，也是全部字形具备相同的宽度的宽度是不同的像一台打字机的字母。

字体大小font-size

    该值是基线到基线距离的字形，若是你有一个以上的一行文字。（SVG，能够没有多线<TEXT>内容，这样的概念有点抽象。）若是您使用此属性的单位，风格=“字体大小：18PT”，18点的大小将被转换为用户单位在渲染以前，所以它能够被变换的影响。

字体重量font-weight

  最经常使用的两种属性的值是bold和normal。

字体风格font-style

  最经常使用的两种属性的值是斜体和正常。italic andnormal.

文字装饰text-decoration

  可能这个属性的值是没有none，下划线underline，上划线overline，线经过line-through.

字间距word-spacing

  此属性的值是一个长度，不管是在明确的单位，如PT或用户单位。让这个正数，字与字之间的空间增长，将它设置为正常，保持正常的空间，或使其负收紧字与字之间的空间。指定的长度被添加到正常的间距。increase normal  

Make this a positive number to increase the space between words, set it to normal to keep normal space, or make it negative to tighten up the space between words.

字母间距letter-spacing

  此属性的值是一个长度，不管是在明确的单位，如PT或用户单位。请这是一个正数，增长个别字母之间的空间，将其设置为正常，保持正常的空间，或使其负收紧字母之间的空间。指定的长度被添加到正常的间距。

 

例8-2中使用这些样式图8-4，你指望任何主管的文本应用程序的效果。

例8-2。文字重量，样式，装饰，和间距属性

<g style="font-size: 18pt">
<text x="20" y="20" style="font-weight:bold;">bold</text>
<text x="120" y="20" style="font-style:italic;">italic</text>
<text x="20" y="60" style="text-decoration:underline;">under</text>
<text x="120" y="60" style="text-decoration:overline;">over</text>
<text x="200" y="60"
    style="text-decoration:line-through;">through</text>
<text x="20" y="90" style="word-spacing: 10pt;">more word space</text>
<text x="20" y="120" style="word-spacing: -3pt;">less word space</text>
<text x="20" y="150" style="letter-spacing: 5pt;">wide letter space</text>
<text x="20" y="180" style="letter-spacing: -2pt;">narrow letter space</text>
</g>

文本对齐

<text>元素,让你指定的起点，让您指定的起点，但你不知道，先验的，其终点。这将使它很难中心或右对齐文本，没有锚文本属性。您能够设置它的值开始，中间或结束。对于左到右所绘制的字体，这些都是至关于左对齐，居中，右对齐。对于在其余方向上所绘制的字体（参见8.7节），这些有不一样的效果。例8-3显示了三个文本字符串，x -100的位置开始，但具备不一样值的锚文本。引导线绘制图8-5的结果，显示效果更清晰。

例8-3。锚文本的使用

 

<g style="font-size: 14pt;">
<path d="M 100 10 100 100" style="stroke: gray; fill: none;"/>
<text x="100" y="30" style="text-anchor: start">Start</text>
<text x="100" y="60" style="text-anchor: middle">Middle</text>
<text x="100" y="90" style="text-anchor: end">End</text>
</g>

 

TSPAN元素

提早一个文本字符串的长度，不知道的另外一个后果是，它是很难构造一个字符串，不一样的文本属性，如这句话，斜体，正常，和大胆的文字之间切换。若是你有只有<TEXT>元素，你须要经过实验来肯定每一个不一样风格的文本段结束，以妥善空间。为了解决这个问题，SVG提供<tspan>的，或文字的span元素。相似的XHTML <SPAN>元素，<tspan>是一个可嵌入的白板，文本内容中，你能够并处风格的变化。该<tspan>回忆的文本位置，因此你没必要。所以，例8-4，它产生的显示在图8-6。

例8-4。使用改变TSPAN风格

 

<text x="10" y="30" style="font-size:12pt;">
    Switch among
    <tspan style="font-style:italic">italic</tspan>, normal,
    and <tspan style="font-weight:bold">bold</tspan> text.
</text>

 

除了 ​​改变显示属性，如字体大小，颜色，重量等，您还可使用与<tspan>属性改变个别字母或字母套的定位。例如，若是你想标或下标，你可使用DY属性，以抵消在短短的字符。你分配给这个属性的值添加到垂直位置的字符，并继续影响到文本，即便外面的跨度。容许负值。相似的属性，DX，偏移字符水平。例8-5采用垂直偏移打造的“降低字母” 图8-7。

例8-5。使用DY改变垂直定位在文本

 

<text x="10" y="30" style="font-size:12pt;">
    F <tspan dy="4">a</tspan>
    <tspan dy="8">l</tspan>
    <tspan dy="12">l</tspan>
</text>

 

若是你想表达中的偏移绝对而非相对而言条款，您可使用的x 和ÿ属性。这是很方便的作多行文本运行。事实上，你必须这样作，由于，你会看到在8.9节，SVG历来没有在文本显示换行符。（缺少一个换行符将予以纠正SVG 1.1）若是您的SVG浏览器容许把多行文本选择，成单<TEXT>元素，由于咱们已经作了例8-6将容许选择包括全部线。你应该老是使用<tspan>小号内<TEXT>元素组相关线路，不只让他们能够选择做为一个单元，但也由于它添加到您的文档结构。
例8-6。使用绝对定位与tspan的

 

<text x="10" y="30" style="font-size:12pt;">
    They dined on mince, and slices of quince,
    <tspan x="20" y="50">Which they ate with a
        runcible spoon;</tspan>
    <tspan x="10" y="70">And hand in hand, on the edge
        of the sand,</tspan>
    <tspan x="20" y="90">They danced by the light of the moon.</tspan>
</text>

有如图8-8全部文本是在一个<TEXT>元素，没有视觉证据，但相信咱们-他们全部链接。

 

 

您可能还轮流使用的旋转属性，它的值是一个角度一个字母或字母系列内<tspan>的。

若是你有修改几个字符的位置，你能够很容易经过指定一系列的数字对于任何X，Y，DX，DY，旋转属性。您指定的号码将被应用，此起彼伏，的字符内<tspan>。例8-7所示

例8-7。使用多个值dx和dy在文本跨度

 

<text x="30" y="30" style="font-size:14pt">
<tspan dx="0 4 -3 5 -4 6" dy="0 -3 7 3 -2 -8">Shaken</tspan>
</text>

虽然图8-9并无表现出来，DX，DY的影响仍然存在在<tspan>结束后。若是更多的文字</ TSPAN闭幕后，它会是相同的偏移的字母n。它不会返回的第一个大写S所创建的基准。

 

 

警告

若是你已经的嵌套<tspan>元素的x，Y，DX，DY，旋转属性值不继承由内部元素。

 

虽然您可使用DY属性产生标和下标，它更容易使用的基线漂移风格，由于咱们已经作了示例8-8。此样式属性的值超子。您也能够指定一个长度，如0.5em，或百分比，这是计算方面的字体大小。基线偏移的影响被限制在它发生的跨度。

例8-8。使用基线移

 

<text x="20" y="25" style="font-size: 12pt;">
C<tspan style="baseline-shift: sub;">12</tspan>
H<tspan style="baseline-shift: sub;">22</tspan>
O<tspan style="baseline-shift: sub;">11</tspan> (sugar)
</text>

<text x="20" y="70" style="font-size: 12pt;">
6.02 x 10<tspan baseline-shift="super">23</tspan>
(Avogadro's number)
</text>

在图8-10中，下标数字出现太大。在一个理想的状况下，咱们会设置字体大小为好，但咱们只专一于一个概念，但愿这个例子。

 

图8-10。标和下标

设置textLength

虽然咱们说，有没有一个先验的方式来肯定滴定终点的一段文字，你能够明确地指定的文本长度textLength的属性的值。SVG将适合文本到给定的空间。它是经过调节字形之间的空间，留下不变的字形自己，或者它能够为适合的话，经过调整的间距和字形大小。若是你想只调整空间，设置间距（这是默认的）lengthAdjust的价值。若是你想SVG调整间距和字形大小，以适应到一个给定长度的话，设置lengthAdjust到spacingAndGlyphs。示例8-9使用这些属性来实现的结果如图8-11。

示例8-9。使用textLength的lengthAdjust

 

<g style="font-size: 14pt;">
<path d="M 20 10 20 70 M 220 10 220 70" style="stroke: gray;"/>
<text x="20" y="30"
    textLength="200" lengthAdjust="spacing">Two words</text>
<text x="20" y="60"
    textLength="200" lengthAdjust="spacingAndGlyphs">Two words</text>

<text x="20" y="90">Two words
    <tspan style="font-size: 10pt;">(normal length)</tspan></text>

<path d="M 20 100 20 170 M 100 100 100 170" style="stroke: gray;"/>
<text x="20" y="120"
    textLength="80" lengthAdjust="spacing">Two words</text>
<text x="20" y="160"
    textLength="80" lengthAdjust="spacingAndGlyphs">Two words</text>
</g>

 

垂直文本

当您使用SVG建立图表，图形或表格，你常常会但愿跑下来的垂直轴的标签。一种方法来实现垂直方向的文字是使用转换的文本旋转 90度。另外一种方式来达到一样的效果是改变的写做模式的样式属性的值TB（即吨运到b ottom的）。change the value of the writing-mode style property to the value tb (meaning t op to b ottom).

然而，有时候，你想要的字母出如今垂直列中没有旋转。例8-10 字形方向垂直的属 ​​性设置的值为零。（它的默认值是90，这是顶至底的文字90度旋转。）在图8-12中，这种设置每每显示字母间的间距不天然的大。设置字母间距小的负的值来解决这个问题。Example 8-10 does this by setting the glyph-orientation-vertical property with a value of zero.

 

<text x="10" y="20" transform="rotate(90,10,20)">Rotated 90</text>
<text x="50" y="20" style="writing-mode: tb;">Writing Mode tb</text>
<text x="90" y="20" style="writing-mode: tb;
    glyph-orientation-vertical: 0;">Vertical zero</text>

国际化和文本

 

unicode和双向性

XML基于Unicode标准（Unicode Consortium的网站，彻底记录http://www.unicode.org）。这让底层的浏览器软件能够在任何语言的显示，你能够看到在图8-13的文本显示。有些语言，如阿拉伯语和希伯来语是从右到左写的，因此当这些语言的文字与书面文字从左到右，英语是混合，文本是双向的，双向的简称。系统软件知道哪些字符在哪一个方向去，他们相应的位置。例8-11还覆盖了一段文字隐含的方向性，经过设置其方向样式属性RTL，它表明的ŗ飞行吨邻升 EFT。若是你想改变方向，希伯来文或阿拉伯文文本，将它设置为LTR，这是升吨 EFT- O- R的洞察力。您还必须明确地覆盖底层的Unicode双向性的算法，经过设置双向覆盖Unicode比迪烟的样式属性。

 

<g style="font-size: 14pt;">

<text x="10" y="30">Greek: </text>
<text x="100" y="30">
   αβγδε
</text>

<text x="10" y="50">Russian:</text>
<text x="100" y="50">
   абвгд
</text>

<text x="10" y="70">Hebrew:</text>
<text x="100" y="70">
    אבגדה (written right to left)
</text>

<text x="10" y="90">Arabic:</text>
<text x="100" y="90">
    ابةت (written right to left)
</text>

<text x="10" y="130">
   This is
      <tspan style="direction: rtl; unicode-bidi: bidi-override;
        font-weight: bold;">right-to-left</tspan>
   text.
</text>
</g>

 

 

开关元件The switch Element

 

 

可以显示多国语言，在一个单一的文件是这样的事情做为一个事件接收国际游客的小册子颇有用。不过，有时你想两种语言建立一个文件的内容，说，西班牙语和俄语。与西班牙的系统软件查看文档的人会看到西班牙文本，和俄国人看到俄文本。

SVG提供了此功能与<switch>的元素。此元素搜索，直到找到一个，其systemLanguage属性有一个值，用户选择浏览器软件的偏好相匹配的语言，经过其全部的孩子。systemLanguage的价值是一个单值或逗号分隔的语言名称列表。一种语言的名称是两个字母的语言代码，例如RU俄罗斯，其次是一个国家的代码，其中指定的子语言或语言代码。例如，FR-CA表示加拿大法语，而FR-CH表示瑞士法语。

一旦找到匹配的子元素，其全部的孩子将被显示。全部其余的孩子<switch>的将被绕过。例8-12显示了文字在英国英语，美国英语，西班牙语和俄罗斯。因为单独的语言代码的比赛被认为是一场比赛，并使用国家代码只能以“打破僵局”，文中对于英国英语，必须先来。

示例8-12。使用的开关元件

<circle cx="40" cy="60" r="20" style="fill: none; stroke: black;"/>
<g font-size="12pt">
<switch>
    <g systemLanguage="en-UK">
        <text x="10" y="30">A circle</text>
        <text x="10" y="100">without colour.</text>
    </g>
    <g systemLanguage="en">
        <text x="10" y="30">A circle</text>
        <text x="10" y="100">without color.</text>
    </g>
    <g systemLanguage="es">
        <text x="10" y="30">Un círculo</text>
        <text x="10" y="100">sin color.</text>
    </g>
    <g systemLanguage="ru">
        <text x="10" y="30">
        Круг
        </text>
        <text x="10" y="100">без
         света.</text>
    </g>
</switch>
</g>

 

使用自定义字体

 

有时候你须要不以Unicode表示的特殊符号，或者你想Unicode字符的一个子集，而无需安装整个字体。一个例子是图8-15，只须要几个超过2,000韩文音节。您能够建立一个自定义字体附录E中所描述的，并给其开始<FONT>的一个独特的ID标记。这里是一个文件，其中包含六个出口巴塘TrueType字体的韩文音节的相关部分。该文件称为kfont.svg“ ：

<font id="kfont-defn" horiz-adv-x="989" vert-adv-y="1200"
    vert-origin-y="0">
    <font-face font-family="bakbatn"
        units-per-em="1000"
        panose-1="2 3 6 0 0 1 1 1 1 1"
        ascent="800" descent="-200" baseline="0" />
        <missing-glyph horiz-adv-x="500" />
        <!-- glyph definitions go here -->
    </font-face>
</font>

一旦作到这一点，能够参考实施例8-13在该外部文件中的字体。为了保持一致性，您使用在本SVG文件的字体家庭的价值应该在外部文件中的值匹配。

例8-13。使用外部字体

 

<defs>
    <font-face font-family="bakbatn">
        <font-face-src>
            <font-face-uri xlink:href="kfont.svg#kfont-defn"/>
        </font-face-src>
    </font-face>
</defs>

<text font-size="28" x="20" y="40" style="font-family: bakbatn;">
    서울 - 대한민국
</text>

路径上的文本Text on a path

 

 

文本没有走在一条直线的水平线或垂直线。它能够按照任意路径，简单地将文本在<textPath>的元素使用XLink的HREF属性指到先前定义的<PATH>的元素的。的信件将被旋转放置的曲线（即，字母的基线曲线相切）的“垂直”。轻轻弯曲和连续路径沿着文本遵循一个棱角分明的或不连续的路径比文字更容易阅读。

警告

您参考在<textPath>元素的路径将不被显示出来。这就是为何例8-14绘制路径与<use>元素。

示例8-14。做为textPath，

 

<defs>
<path id="curvepath"
    d="M30 40 C 50 10, 70 10, 120 40 S 150 0, 200 40"
    style="stroke: gray; fill: none;"/>

<path id="round-corner"
    d="M250 30 L 300 30 A 30 30 0 0 1 330 60 L 330 110"
    style="stroke: gray; fill: none;"/>

<path id="sharp-corner"
    d="M 30 110 100 110 100 160"
    style="stroke: gray; fill: none;"/>

<path id="discontinuous"
    d="M 150 110 A 40 30 0 1 0 230 110 M 250 110 270 140"
    style="stroke: gray; fill: none;"/>
</defs>


<use xlink:href="#curvepath"/>
<text style="font-size: 12;">
    <textPath xlink:href="#curvepath">
    Following a cubic Bézier curve.
    </textPath>
</text>

<use xlink:href="#round-corner"/>
<text style="font-size: 12;">
    <textPath xlink:href="#round-corner">
    Going 'round the bend
    </textPath>
</text>

<use xlink:href="#sharp-corner"/>
<text style="font-size: 12;">
    <textPath xlink:href="#sharp-corner">
    Making a quick turn
    </textPath>
</text>

<use xlink:href="#discontinuous"/>
<text style="font-size: 12;">
    <textPath xlink:href="#discontinuous">
    Text along a broken path
    </textPath>
</text>

例8-14产生图8-16，图8-17显示了你是什么样子同样，若是咱们没有基础路径绘制文本。

 

您能够调整文本的起点，沿其路径startOffset属性设置百分比或长度。例如，startOffset =“25％”将开始沿路径的距离的四分之一的文本，startOffset =“30”，将在从开始的整个路径的距离为30个用户单位启动文本。若是你想路径上的文本居中，如例8-15，设置一个TextAnchor =“中间”的的<TEXT>元素startOffset =“50％”上<textPath>元素。落的路径的端部之外的文本将不被显示，如图8-18中所示的左半边。

例8-15。文本长度和startOffset

<defs>
<path id="short-corner" transform="translate(40,40)"
    d="M0 0 L 30 0 A 30 30 0 0 1 60 30 L 60 60"
    style="stroke: gray; fill: none;"/>

<path id="long-corner" transform="translate(140,40)"
    d="M0 0 L 50 0 A 30 30 0 0 1 80 30 L 80 80"
    style="stroke: gray; fill: none;"/>
</defs>

<use xlink:href="#short-corner"/>
<text style="font-size: 12;">
    <textPath xlink:href="#short-corner">
    This text is too long for the path.
    </textPath>
</text>

<use xlink:href="#long-corner"/>
<text style="font-size: 12; text-anchor: middle;">
    <textPath xlink:href="#long-corner" startOffset="50%">
    centered
    </textPath>
</text>

 

空白和文本

 

你能够改变的方式，SVG句柄空格（空格，制表符和换行符）在文本改变：空间属性的XML值。若是你指定一个默认值（巧合的是，这是默认值），SVG将处理空白以下：

• 删除全部换行符
• 更改全部标签空白
• 删除全部前导和尾随空白
• 中间空白更改任何运行一个单一的空白

所以，这个字符串，其中\吨表示一个标签表明一个换行符\ N，下划线表示空白，这段文字：Thus, this string, where \t represents a tab and \n represents a newline, and an underscore represents a blank, this text:

\n\n___abc_\t\t_def_\n\n__ghi

将显示为

 

abc_def_ghi

其余设置的xml：space 保存。有了这个设置，SVG将简单地转换全部换行符和标签的字符为空格，而后显示结果，包括前导和尾随空白。相同的文字：

 

 

\n\n___abc_\t\t_def_\n\n__ghi

将显示为

 

 

_____abc____def_____ghi

 

警告

SVG的处理是不喜欢的HTML的空白。SVG的默认处理方式消除全部换行符HTML改变内部空间换行符。SVG的领地方法换行符转换空白; HTML的<PRE>元素不。有没有换行SVG 1.0，这困扰着人们，直到他们意识到SVG的文本是面向图形显示，文字内容（XHTML）

案例研究--图形添加文本

图8-19增长了韩语和英语文本朝鲜民族的象征，图6-5所示。文本居中沿着一个椭圆形的路径。例8-16的额外SVG 以粗体显示。

例8-16。文本案例研究Case Study -- Adding Text to a Graphic

 

<defs>
    <font-face font-family="bakbatn">
        <font-face-src>
            <font-face-uri xlink:href="kfont.svg#kfont-defn"/>
        </font-face-src>
    </font-face>

    <path id="upper-curve" d="M -8 154 A 162 130 0 1 1 316 154"/>
    <path id="lower-curve" d="M -21 154 A 175 140 0 1 0 329 154"/>
</defs>

<ellipse cx="154" cy="154" rx="150" ry="120" style="fill: #999999;"/>
<ellipse cx="152" cy="152" rx="150" ry="120" style="fill: #cceeff;"/>

<!-- large light red semicircle fills upper half,
     followed by small light red semicircle that dips into
     lower left half of symbol -->
<path d="M 302 152 A 150 120, 0, 1, 0, 2 152
    A 75 60, 0, 1, 0, 152 152" style="fill: #ffcccc;"/>

<!-- light blue semicircle rises into upper right half of symbol -->
<path d="M 152 152 A 75 60, 0, 1, 1, 302 152" style="fill: #cceeff;"/>


<text font-family="bakbatn" style="font-size: 28; text-anchor: middle;">
    <textPath xlink:href="#upper-curve" startOffset="50%">
    서울 - 대한민국
    </textPath>
</text>

<text style="font-size: 14pt; text-anchor: middle;">
    <textPath xlink:href="#lower-curve" startOffset="50%">
    Seoul - Republic of Korea
    </textPath>
</text>