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