files/zh-cn/web/svg/tutorial/texts/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

---
title: Texts
slug: Web/SVG/Tutorial/Texts
translation_of: Web/SVG/Tutorial/Texts
---
<div>{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}</div>

<p>在SVG中有两种截然不同的文本模式. 一种是写在图像中的文本，另一种是SVG字体。关于后者我们将在教程的后面进行讲解，现在我们主要集中前者：写在图像中的文本。</p>

<h2 id="基础">基础</h2>

<p>我们已经在之前<a href="/zn-CN/docs/Web/SVG/Tutorial/Getting_Started">入门示例</a>中看到了，在一个SVG文档中，&lt;text&gt;元素内部可以放任何的文字。</p>

<pre class="brush:xml notranslate">&lt;text x="10" y="10"&gt;Hello World!&lt;/text&gt;
</pre>

<p>属性x和属性y性决定了文本在视口中显示的位置。属性<code>text-anchor</code>，可以有这些值：start、middle、end或inherit，允许决定从这一点开始的文本流的方向。</p>

<p>和形状元素类似，属性<code>fill</code>可以给文本填充颜色，属性<code>stroke</code>可以给文本描边，形状元素和文本元素都可以引用渐变或图案, 相比较CSS2.1只能绘制简单的彩色文字，SVG显得更具有优势。</p>

<h2 id="设置字体属性">设置字体属性</h2>

<p>文本的一个至关重要的部分是它显示的字体。SVG提供了一些属性，类似于它们的CSS同行，用来激活文本选区。下列每个属性可以被设置为一个SVG属性或者成为一个CSS声明：<code>font-family</code>、<code>font-style</code>、<code>font-weight</code>、<code>font-variant</code>、<code>font-stretch</code>、<code>font-size</code>、<code>font-size-adjust</code>、<code>kerning</code>、<code>letter-spacing</code>、<code>word-spacing</code>和<code>text-decoration</code>。</p>

<h2 id="其它文本相关的元素">其它文本相关的元素</h2>

<h3 id="tspan">tspan</h3>

<p>该元素用来标记大块文本的子部分，它必须是一个<code>text</code>元素或别的<code>tspan</code>元素的子元素。一个典型的用法是把句子中的一个词变成粗体红色。</p>

<pre class="brush:xml notranslate">&lt;text&gt;
  &lt;tspan font-weight="bold" fill="red"&gt;This is bold and red&lt;/tspan&gt;
&lt;/text&gt;
</pre>

<p><code>tspan</code>元素有以下的自定义属性：</p>

<p><strong>x</strong><br>
 为容器设置一个新绝对<code>x</code>坐标。它覆盖了默认的当前的文本位置。这个属性可以包含一个数列，它们将一个一个地应用到<code>tspan</code>元素内的每一个字符上。</p>

<p><strong>dx</strong><br>
 从当前位置，用一个水平偏移开始绘制文本。这里，你可以提供一个值数列，可以应用到连续的字体，因此每次累积一个偏移。</p>

<p>此外还有属性<strong>y</strong>和属性<strong>dy</strong>作垂直转换。</p>

<p><strong>rotate</strong><br>
 把所有的字符旋转一个角度。如果是一个数列，则使每个字符旋转分别旋转到那个值，剩下的字符根据最后一个值旋转。</p>

<p><strong>textLength</strong><br>
 这是一个很模糊的属性，给出字符串的计算长度。它意味着如果它自己的度量文字和长度不满足这个提供的值，则允许渲染引擎精细调整字型的位置。</p>

<h4 id="tref">tref</h4>

<p><code>tref</code>元素允许引用已经定义的文本，高效地把它复制到当前位置。你可以使用<code>xlink:href</code>属性，把它指向一个元素，取得其文本内容。你可以独立于源样式化它、修改它的外观。</p>

<pre class="brush:xml notranslate">&lt;text id="example"&gt;This is an example text.&lt;/text&gt;

&lt;text&gt;
    &lt;tref xlink:href="#example" /&gt;
&lt;/text&gt;
</pre>

<h4 id="textPath">textPath</h4>

<p>该元素利用它的<code>xlink:href</code>属性取得一个任意路径，把字符对齐到路径，于是字体会环绕路径、顺着路径走：</p>

<pre class="brush:xml notranslate">&lt;path id="my_path" d="M 20,20 C 40,40 80,40 100,20" fill="transparent" /&gt;
&lt;text&gt;
  &lt;textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"&gt;
    This text follows a curve.
  &lt;/textPath&gt;
&lt;/text&gt;</pre>

<div>{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}</div>