SVGの強力な機能の1つは、画像やその他のプラグインに頼る必要なく、標準のHTMLページでは不可能なレベルにテキストを制御できることです。形状やパス（図面やフィルタリングなど）で実行できるアクションは、テキストで実行できます。 SVGのテキストレンダリングは非常に強力ですが、まだ1つの欠点があります。SVGは自動ラインラッピングを実行できません。テキストが許可されたスペースよりも長い場合は、単に切り取ってください。ほとんどの場合、複数のテキスト行を作成するには、複数のテキスト要素が必要です。
さらに、TSPAN要素を使用してテキスト要素をセクションに分割し、各セクションに独自のスタイルを持つことができます。
また、テキスト要素では、スペースの処理はHTMLに似ています。ラインブレークとキャリッジリターンはスペースになり、複数のスペースが単一のスペースに圧縮されます。
画像に直接表示されるテキスト - テキスト要素テキストを直接表示するには、次のようにテキスト要素を使用できます。<svg>
<rect fill = "red" />
<circle cx = "150" cy = "100" r = "80" fill = "緑" />
<text x = "150" y = "125" font-size = "60" text-anncor = "middle" fill = "white"> svg </text>
</svg>
上記の例に示すように、テキスト要素は次のプロパティを設定できます。
x、yはテキスト位置座標です。テキストアンカーはテキストディスプレイの方向であり、実際にはテキストの位置にある位置（x、y）です。このプロパティには、スタート、ミドル、エンドの3つの値があります。開始とは、テキスト位置座標（x、y）がテキストの先頭に配置され、テキストがこの時点から1つずつ右に表示されることを意味します。中央の平均（x、y）はテキストの中央にあり、テキストは実際に中心にある左方向と右方向に表示されます。終了とは、（x、y）ポイントがテキストの最後にあり、テキストが左に1つずつ表示されることを意味します。これらのプロパティに加えて、次のプロパティをCSSで指定するか、プロパティで直接指定できます。
塗りつぶし、ストローク：塗りつぶし、ストロークの色、特定の使用が後で要約されます。フォントの関連属性：フォントファミリー、フォントスタイル、フォントウェイト、フォントバリアント、フォントストレッチ、フォントサイズ、フォントサイズアジャスト、カーニング、レタースペース、単語間隔、テキストデカレーション。テキスト間隔-TSPAN要素この要素は、テキスト要素を強力に補完します。間隔内でテキストをレンダリングするために使用されます。 TSPAN要素のテキスト要素または子要素にのみ表示できます。典型的な使用法は、テキストの一部を表示することを強調することです。例えば：<テキスト>
<tspan font-weight = "bold" fill = "red">これは太字で赤い</tspan>です
</text>
TSPAN要素には、設定できる以下のプロパティがあります。X、Yは、デフォルトのテキスト位置をオーバーライドするコンテルドテキストの絶対座標値を設定するために使用されます。これらのプロパティには、対応する各単一文字に適用される一連の数値を含めることができます。対応する設定がない文字は、前の文字に従います。例えば：
<テキストx = "10" y = "10"> hello world！
<tspan x = "100 200 300" font-weight = "bold" fill = "red">これは大胆で赤</tspan>
</text>
dx、dyは、デフォルトのテキスト位置に対する含まれるテキストのオフセットを設定するために使用されます。これらのプロパティには、それぞれが対応する文字に適用される一連の数値を含めることもできます。対応する設定がない文字は、前の文字に従います。 Xを上記の例からDXに変更して、効果を確認できます。回転は、フォントの回転角を設定するために使用されます。このプロパティページには、各文字に適用される一連の数値を含めることができます。対応する設定がない文字は、最後の番号セットを使用します。
<テキストx = "10" y = "10"> hello world！
<tspan rotate = "10 20 45" font-weight = "bold" fill = "red">これは大胆で赤</tspan>
</text>
TextLength：これは最も不可解なプロパティです。設定後、レンダリングがテキストの長さがこの値と矛盾していることがわかったとき、この長さが基礎となると言われています。しかし、私はそれを試していませんでした。テキストの引用 - TREF要素
この要素により、定義されたテキストを参照し、通常はXlink：HREF指定ターゲット要素を使用して現在の場所に効率的にコピーできます。 CSSを使用して現在のテキストを変更する場合、コピーされたため、元のテキストは変更されません。例を参照してください：
<テキストID = "example">これは例のテキストです。</text>
<テキスト>
<tref xlink：href = "＃example" />
</text>
テキストパス - テキストパス要素これはより興味深いものであり、効果もクールであり、多くの芸術的効果を生み出すことができます。この要素は、Xlinkから指定されたパスを取得します。HREF属性は、このパス上のテキストを調整します。例を参照してください。<path id = "my_path" d = "m 20,20 c 40,40 80,40 100,20" />
<テキスト>
<TextPath xlink：href = "＃my_path">このテキストは曲線に従います。</textpath>
</text>
SVGでのレンダリング画像 - 画像要素SVGの画像要素は、非常に使いやすいラスター画像の表示を直接サポートできます。次の例を参照してください。<svg>
<画像xlink：href = "penguins.jpg" x = "0" y = "0"/>
</svg>
ここに注意すべきいくつかのポイント：1. xまたはy座標が設定されていない場合、デフォルトは0です。
2。幅または高さが設定されていない場合、デフォルトは0です。
3.幅または高さが明示的に0に設定されている場合、この画像のレンダリングは禁止されます。
4.画像形式は、PNG、JPEG、JPG、SVGなどをサポートするため、SVGはネストされたSVGをサポートします。
5.imageは、他の要素と同様にSVGの通常の要素であるため、トリミング、マスキング、フィルタリング、回転などのすべての効果をサポートします。
実用的なリファレンス：スクリプトインデックス：http：//msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
開発センター：https：//developer.mozilla.org/en/svg
人気リファレンス：http：//www.chinasvg.com/
公式文書：http：//www.w3.org/tr/svg11/