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
|
---
title: Texts
slug: Web/SVG/Tutorial/Texts
tags:
- SVG
- 'SVG:Tutorial'
translation_of: Web/SVG/Tutorial/Texts
---
<div>{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}</div>
<p>SVG でのテキストについて説明するにあたり、これをほとんど別物である 2 つのトピックに区別しなければなりません。ひとつは画像内へのテキストの収容と表示、もう一つは SVG フォントです。後者はこのチュートリアルの後のセクションで説明することにして、ここでは一つ目の部分 "SVG 画像へのテキスト入力" に集中します。</p>
<h2 id="Basics" name="Basics">基礎</h2>
<p><a href="/ja/docs/Web/SVG/Tutorial/Getting_Started">導入時の例示</a>で見たとおり、<code>text</code> 要素を用いて SVG ドキュメントに任意のテキストを入れることができます。</p>
<pre class="brush:xml"><text x="10" y="10">Hello World!</text>
</pre>
<p><code>x</code> および <code>y</code> 属性で、ビューポートのどこにテキストを表示するかを指定します。<code>text-anchor</code> 属性は start、middle、end、inherit の値を持つことができ、<code>x</code> および <code>y</code> 属性で指定した点からどちらの方向にテキストを流すかを指定できます。</p>
<p>図形の要素と同様に、テキストも <code>fill</code> 属性による着色と、<code>stroke</code> 属性によるストロークの付加ができます。またどちらもグラデーションやパターンを参照することができ、SVG の単純な色つきテキストを CSS 2.1 に比べて非常に強力にします。</p>
<h2 id="Setting_font_properties" name="Setting_font_properties">フォントプロパティの設定</h2>
<p>テキストにおいて重要なことは、どのフォントで表示するかです。SVG はフォントを選択可能にするための属性のセットを用意しており、その多くは CSS で対応するプロパティに似ています。以下の各プロパティを、属性としてまたは 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="Other_text-related_elements" name="Other_text-related_elements">他のテキスト関連要素</h2>
<h3 id="tspan" name="tspan">tspan</h3>
<p>この要素は、長いテキストの一部分をマークアップするために用います。<code>text</code> 要素または他の <code>tspan</code> 要素の子要素にしなければなりません。典型的な用途は、文中の単語 1 つを赤色の太字にすることです。</p>
<pre class="brush:xml"><text>
<tspan font-weight="bold" fill="red">This is bold and red</tspan>
</text>
</pre>
<p>tspan 要素は以下のカスタム属性を持ちます:</p>
<p><strong>x</strong><br> 包含しているテキストの新たな絶対 X 座標を設定します。これはテキストのデフォルトの現在位置を上書きします。またこの属性は数値のリストを含むことができ、その値は一つずつ、tspan 要素内の各文字に適用されます。</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" name="tref">tref</h4>
<p><code>tref</code> 要素ではすでに定義しているテキストを参照でき、効率的にその文字列をコピーします。内容物のテキストを引用する要素を指し示すために <code>xlink:href</code> 属性を用いることができます。また引用元とは別に、スタイルの設定や外見の変更を行うことができます。</p>
<pre class="brush:xml"><text id="example">This is an example text.</text>
<text>
<tref xlink:href="#example" />
</text>
</pre>
<h4 id="textPath" name="textPath">textPath</h4>
<p>この要素は <code>xlink:href</code> 属性を通して任意のパスを取り出し、そのパスに沿って囲むように文字を並べます。</p>
<pre class="brush:xml"><path id="my_path" d="M 20,20 C 40,40 80,40 100,20" />
<text>
<textPath xlink:href="#my_path">This text follows a curve.</textPath>
</text>
</pre>
<div>{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}</div>
|
