html5 svg 第八章文字text

時間 2019-11-17

標籤 html5 html svg 第八文字 text 欄目 HTML5 简体版

原文原文鏈接

雖然它多是真實的，每個畫面講述了一個故事，這是徹底正確的，用言語來幫助講故事。所以，SVG有幾個元素，讓你將文本添加到您的圖形。php

文本術語 Text Terminologycss

在咱們調查的主要方法添加文本，的<TEXT>元素以前，咱們應該定義一些術語，你會看到，若是你讀了SVG規範，或者若是你的工做與文字在任何圖形環境：html

字符: 一個字符，做爲一個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是用來肯定帽的高度，這是一個大寫字母在基線以上的高度。的較低的虛線是用來肯定前的高度，其中，邏輯的是，從基線到小寫字母「×的頂部的距離是。less

簡單的屬性和屬性的文本元素ide

<text>元素最簡單的形式，只須要兩個屬性x和y，它定義了元素的內容的第一個字符的基線baseline被放置的位置,文本的默認樣式是有黑色，沒有輪廓的填充顏色。事實證實這真實你想要的文本顏色。若是你設置的輪廓，以及做爲填充，文字看起來不舒服厚。若是您只設置的輪廓，你能夠獲得一個至關愉快的字形輪廓，特別是若是你下降中風的寬度。例8-1 <文本>使用的位置和中風/填充特性，其結果是圖8-3。svg

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

[html] view plain copy

<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。文字重量，樣式，裝飾，和間距屬性

[html] view plain copy

<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。錨文本的使用

[html] view plain copy

<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風格

[html] view plain copy

<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改變垂直定位在文本

[html] view plain copy

<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的

[html] view plain copy

<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在文本跨度

[html] view plain copy

<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。使用基線移

[html] view plain copy

<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

[html] view plain copy

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

[html] view plain copy

<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比迪煙的樣式屬性。

[html] view plain copy

<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。使用的開關元件

[html] view plain copy

<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「 ：

[html] view plain copy

<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" />
</font-face>
</font>

一旦作到這一點，能夠參考實施例8-13在該外部文件中的字體。爲了保持一致性，您使用在本SVG文件的字體家庭的價值應該在外部文件中的值匹配。

例8-13。使用外部字體

[html] view plain copy

<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，

[html] view plain copy

<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

[html] view plain copy

<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:

[html] view plain copy