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
158
159
|
---
title: <text>
slug: Web/SVG/Element/text
tags:
- Element
- Reference
- SVG
- SVG Text Content
translation_of: Web/SVG/Element/text
---
<div>{{SVGRef}}</div>
<p><span class="seoSummary">SVG <strong><code><text></code></strong> 要素は、テキストからなるグラフィクス要素を定義します。<code><text></code> には、他の SVG グラフィクス要素と同じように、グラデーション、パターン、クリッピングパス、マスク、またはフィルターを適用することができます。</span></p>
<p>SVG 内でテキストが <code><text></code> 要素内以外で組み込まれた場合、レンダリングされません。これはデフォルトで隠されるのとは違い、<a href="/docs/Web/SVG/Attribute/display">ディスプレイプロパティ</a> を変更してもテキストは表示されません。</p>
<h2 id="Usage_context" name="Usage_context">使用可能な場所</h2>
<p>{{svginfo}}</p>
<h2 id="Attributes" name="Attributes">属性</h2>
<h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3>
<ul>
<li><a href="/docs/Web/SVG/Attribute#Conditional_processing_attributes">条件処理属性</a> »</li>
<li><a href="/docs/Web/SVG/Attribute#Core_attributes">コア属性</a> »</li>
<li><a href="/docs/Web/SVG/Attribute#Graphical_event_attributes">グラフィカルイベント属性</a> »</li>
<li><a href="/docs/Web/SVG/Attribute#Presentation_attributes">プレゼンテーション属性</a> »</li>
<li>{{SVGAttr("class")}}</li>
<li>{{SVGAttr("style")}}</li>
<li>{{SVGAttr("externalResourcesRequired")}}</li>
<li>{{SVGAttr("transform")}}</li>
</ul>
<h3 id="Specific_attributes" name="Specific_attributes">専用属性</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_Interface" name="DOM_Interface">DOM インターフェイス</h2>
<p>この要素は {{domxref("SVGTextElement")}} インターフェイスを実装します。</p>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Basic_text_usage" name="Basic_text_usage">基本的なテキストの使用例</h3>
<h4 id="SVG">SVG</h4>
<pre class="brush: html"><svg xmlns="http://www.w3.org/2000/svg"
width="500" height="40" viewBox="0 0 500 40">
<text x="0" y="35" font-family="Verdana" font-size="35">
Hello, out there
</text>
</svg></pre>
<h4 id="Result" name="Result">結果</h4>
<p>{{EmbedLiveSample("Basic_text_usage", 500, 60)}}</p>
<h3 id="Rotated_text" name="Rotated_text">回転テキスト</h3>
<p>SVG テキストは回転することができます。</p>
<h4 id="SVG_2">SVG</h4>
<pre class="brush: html"><svg xmlns="http://www.w3.org/2000/svg" width="180" height="120">
<text x="0" y="20" transform="rotate(30 20,40)">
SVG Text Rotation example
</text>
</svg></pre>
<h4 id="Result_2" name="Result_2">結果</h4>
<p>{{EmbedLiveSample("Rotated_text", 180, 120)}}</p>
<h3 id="Colored_text" name="Colored_text">着色テキスト</h3>
<p>SVG テキストは着色することができます。</p>
<h4 id="SVG_3">SVG</h4>
<pre class="brush: html"><svg xmlns="http://www.w3.org/2000/svg" width="200" height="30">
<text x="10" y="20" stroke="none" fill="red">
SVG Colored Text
</text>
</svg></pre>
<h4 id="Result_3" name="Result_3">結果</h4>
<p>{{EmbedLiveSample("Colored_text", 200, 30)}}</p>
<h3 id="Styling_text_via_CSS" name="Styling_text_via_CSS">CSS を用いたテキストのスタイリング</h3>
<p>SVG テキストは HTML テキストのようにスタイリングできます。</p>
<h4 id="SVG_4">SVG</h4>
<pre class="brush: html"><svg xmlns="http://www.w3.org/2000/svg" width="400" height="60">
<text x="10" y="40"
style="font-family: Times New Roman;
font-size: 44px;
stroke: #00ff00;
fill: #0000ff;">
SVG text styling
</text>
</svg></pre>
<h4 id="Result_4" name="Result_4">結果</h4>
<p>{{EmbedLiveSample("Styling_text_via_CSS", 400, 60)}}</p>
<h2 id="Specifications" name="Specifications">仕様</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様</th>
<th scope="col">状態</th>
<th scope="col">コメント</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('SVG2', 'text.html#TextElement', '<text>')}}</td>
<td>{{Spec2('SVG2')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('SVG1.1', 'text.html#TextElement', '<text>')}}</td>
<td>{{Spec2('SVG1.1')}}</td>
<td>初期の定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー互換性</h2>
<p>{{Compat("svg.elements.text")}}</p>
<h2 id="Related" name="Related">関連情報</h2>
<ul>
<li>{{SVGElement("tspan")}}</li>
<li>{{SVGElement("tref")}}</li>
<li>{{SVGElement("altGlyph")}}</li>
</ul>
|
