diff options
Diffstat (limited to 'files/ja/web/svg/element/text/index.html')
| -rw-r--r-- | files/ja/web/svg/element/text/index.html | 159 |
1 files changed, 159 insertions, 0 deletions
diff --git a/files/ja/web/svg/element/text/index.html b/files/ja/web/svg/element/text/index.html new file mode 100644 index 0000000000..5c42559230 --- /dev/null +++ b/files/ja/web/svg/element/text/index.html @@ -0,0 +1,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> |