HTML5 での SVG 2D の概要 3 — テキスト、画像、レンダリングの概要 text_html5 チュートリアル スキル

SVG でのテキストのレンダリング

SVG の強力な機能の 1 つは、画像や他のプラグインに頼ることなく、標準の HTML ページでは不可能な程度までテキストを制御できることです。シェイプまたはパスに対して実行できる操作 (ペイントやフィルタリングなど) は、テキストに対しても実行できます。 SVG のテキスト レンダリングは非常に強力ですが、まだ欠点が 1 つあります。それは、SVG は自動ワード ラップを実行できないことです。テキストが許容スペースより長い場合は、単に切り取ってください。ほとんどの場合、複数行のテキストを作成するには、複数のテキスト要素が必要です。
さらに、tspan 要素を使用してテキスト要素を複数の部分に分割し、各部分に独自のスタイルを持たせることができます。

また、テキスト要素では、スペースは HTML と同様に扱われ、改行と復帰はスペースになり、複数のスペースは 1 つのスペースに圧縮されます。

画像内に直接表示されるテキスト - テキスト要素
テキストを直接表示するには、テキスト要素を使用します。例は次のとおりです。

コードをコピーします

コードは次のとおりです:

SVG

示されているように上の例では、テキスト要素は次の属性を設定できます: x、y はテキストの位置座標です。 text-anchor はテキストの表示方向であり、実際にはテキストの位置 (x, y) です。この属性には、start、middle、end の 3 つの値があります。 start は、テキストの位置座標 (x, y) がテキストの先頭にあり、そこから右に 1 つずつテキストが表示されることを意味します。 Middle は、(x, y) がテキストの中央に位置し、テキストが両方向に表示され、実際には中央に配置されることを意味します。 end は、(x, y) 点がテキストの最後にあり、テキストが左に 1 つずつ表示されることを意味します。

これらの属性に加えて、次の属性を CSS または属性で直接指定できます:

fill、stroke: 塗りつぶしとストロークの色。具体的な使用方法は後でまとめます。フォントの関連属性: font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、カーニング、letter-spacing、word-spacing、および text-decoration。

テキスト範囲 - tspan 要素
この要素は、テキスト要素または tspan 内にのみ表示されるテキスト要素の強力な補足です。子要素内の要素。一般的な使用法は、テキストの一部を強調表示することです。例:

コードをコピー

コードは次のとおりです:

これは太字で赤です

tspan 要素設定には次の属性があります: x、y は、含まれるテキストの絶対座標を設定するために使用されます。この値はデフォルトのテキスト位置をオーバーライドします。これらのプロパティには、対応する単一文字に適用される一連の数字を含めることができます。対応する設定のない文字は、前の文字の直後に続きます。例:

コードをコピー

コードは次のとおりです:

Hello World!
これは太字で赤色です

dx,dy は、デフォルトのテキスト位置を基準とした、含まれるテキストのオフセットを設定するために使用されます。これらのプロパティには一連の数値を含めることもでき、それぞれが対応する文字に適用されます。対応する設定のない文字は、前の文字の直後に続きます。上の例の x を dx に置き換えて効果を確認できます。回転はフォントの回転角度を設定するために使用されます。このプロパティ ページには、各文字に適用される一連の番号を含めることができます。対応する設定がない文字には、最後に設定された番号が使用されます。

コードをコピー

コードは次のとおりです:

Hello World!
これは太字で赤です
< /text>

textLength: これは最も不可解な属性です。設定後、テキストの長さがこの値と矛盾していることが判明した場合、この長さが優先されると言われています。しかし、私はそれを試しませんでした。

テキスト参照 - tref 要素
この要素を使用すると、定義されたテキストを参照し、それを現在の場所に効率的にコピーできます。通常は、宛先要素を指定する xlink:href と組み合わせて使用​​します。コピーされるため、css を使用して現在のテキストを変更しても、元のテキストは変更されません。例を見てください:

コードをコピーします

コードは次のとおりです:

これはテキストの例です。


< /text>

テキスト パス - textPath 要素
これはさらに興味深いもので、効果もクールで、多くの芸術的な効果を作成できます。この要素は指定されたパスを取得します。 xlink:href 属性からテキストをこのパスに配置します。例を参照してください。

コードをコピーします

コードは次のとおりです:

このテキストは曲線に従います。

SVG での画像のレンダリング- image 要素
SVG の image 要素はラスター イメージの表示を直接サポートでき、使い方は非常に簡単です。以下の例を見てください:

コードをコピーします

コードは次のとおりです:

ここで注意すべき点がいくつかあります:
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/