files/zh-cn/web/svg/element/text/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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157

---
title: text
slug: Web/SVG/Element/text
tags:
  - SVG
  - SVG文本内容
  - 元素
  - 参考
translation_of: Web/SVG/Element/text
---
<div>{{SVGRef}}</div>

<p><code style="font-style: normal; line-height: 1.5;">text</code><span style="line-height: 1.5;">元素定义了一个由文字组成的图形。注意：我们可以将渐变</span><span style="line-height: 1.5;">、</span><span style="line-height: 1.5;">图案、</span><span style="line-height: 1.5;">剪切路径、遮罩</span><span style="line-height: 1.5;">或者</span><span style="line-height: 1.5;">滤镜应用到text上。</span></p>

<h2 id="使用上下文">使用上下文</h2>

<p>{{svginfo}}</p>

<h2 id="示例">示例</h2>

<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
&lt;svg xmlns="http://www.w3.org/2000/svg"
     width="100px" height="30px" viewBox="0 0 1000 300"&gt;

  &lt;text x="250" y="150"
        font-family="Verdana"
        font-size="55"&gt;
    Hello, out there
  &lt;/text&gt;

  &lt;!-- Show outline of canvas using 'rect' element --&gt;
  &lt;rect x="1" y="1" width="998" height="298"
        fill="none" stroke="1" stroke-width="2" /&gt;
&lt;/svg&gt;
</pre>

<p>&lt;text&gt;元素用来绘制文本。下面这段代码展示了如何在坐标系中绘制一段文本。</p>

<pre class="brush: xml">&lt;svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"&gt;
  &lt;text x="10" y="20"&gt;SVG Text Example&lt;/text&gt;
&lt;/svg&gt;
</pre>

<p>可以旋转SVG文本。下面的代码做了一个演示。</p>

<pre class="brush: xml">&lt;svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"&gt;
  &lt;text x="10"  y="20"
        transform="rotate(30 20,40)"&gt;
    SVG Text Rotation example
  &lt;/text&gt;
&lt;/svg&gt;
</pre>

<p>SVG文本还可以应用样式。</p>

<pre class="brush: xml">&lt;svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"&gt;
  &lt;text x="10"  y="20"
        style="font-family: Times New Roman;
               font-size  : 24;
               stroke     : #00ff00;
               fill       : #0000ff;"&gt;
    SVG text styling
  &lt;/text&gt;
&lt;/svg&gt;
</pre>

<h2 id="属性">属性</h2>

<h3 id="全局属性">全局属性</h3>

<ul>
 <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li>
 <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li>
 <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">图形事件属性</a> »</li>
 <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li>
 <li>{{ SVGAttr("class") }}</li>
 <li>{{ SVGAttr("style") }}</li>
 <li>{{ SVGAttr("externalResourcesRequired") }}</li>
 <li>{{ SVGAttr("transform") }}</li>
</ul>

<h3 id="专有属性">专有属性</h3>

<ul>
 <li>{{ SVGAttr("x") }}</li>
 <li>{{ SVGAttr("y") }}</li>
 <li>{{ SVGAttr("dx") }}</li>
 <li>{{ SVGAttr("dy") }}</li>
 <li>{{ SVGAttr("text-anchor") }}</li>
 <li>{{ SVGAttr("rotate") }}</li>
 <li>{{ SVGAttr("textLength") }}</li>
 <li>{{ SVGAttr("lengthAdjust") }}</li>
</ul>

<h2 id="DOM接口">DOM接口</h2>

<p>该元素实现了<code><a href="/en/DOM/SVGTextElement" title="en/DOM/SVGTextElement">SVGTextElement</a></code>接口。</p>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>IE</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatChrome('1.0') }}</td>
   <td>{{ CompatGeckoDesktop('1.8') }}</td>
   <td>{{ CompatIE('9.0') }}</td>
   <td>{{ CompatOpera('8.0') }}</td>
   <td>{{ CompatSafari('3.0.4') }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatAndroid('3.0') }}</td>
   <td>{{ CompatGeckoMobile('1.8') }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatSafari('3.0.4') }}</td>
  </tr>
 </tbody>
</table>
</div>

<p>这个图表基于<a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">这些资源</a>。</p>

<h2 id="相关内容">相关内容</h2>

<ul>
 <li>{{ SVGElement("tspan") }}</li>
 <li>{{ SVGElement("tref") }}</li>
 <li>{{ SVGElement("altGlyph") }}</li>
</ul>