Scalable Vector Graphics（SVG）でテキストを処理する
前回の投稿では、SVGを使用して図形を作成しました。この記事では、タイトルが言ったように、私達はに調べます SVGでテキストを作成する. プレーンテキストのHTMLテキストでできること以外に、テキストでできることはたくさんあります。.
それでは、チェックしましょう.
基本的な実装
しかし、先に進む前に、 SVGのテキスト 非常に基本的なレベルで形成されています：
SVGのテキストは、上記のコードスニペットからわかるように、十分に論理的なタグで定義されています。, バツ そして よ ベースライン座標を指定するための属性.
画像ソース： Wikipedia.org
そして、これがテキストがどのように見えるかです。今のところ、HTMLの通常のテキストと違いはないようです.
基本テキストスタイル
テキストは以下のようなCSSプロパティでスタイル化することもできます。 フォントの太さ, フォントスタイル, そして テキスト装飾 どちらでも実装できます。 インラインスタイル、内部スタイル または 外部スタイル 前の記事で説明したように CSSによるSVGのスタイリング. ここにいくつかの例があります.
大胆な
これはScalable Vector Graphic（SVG）のテキストです。
イタリック
これはScalable Vector Graphic（SVG）の斜体テキストです。
下線
これはScalable Vector Graphic（SVG）の下線付きテキストです。
素子
場合によっては、テキストの特定の部分にスタイルや属性を適用するだけの場合は、
これは大胆です ,これは斜体です そしてこれは下線です
書き込みモード
テキストはから書かれているだけではありません 左から右へ. 世界の他の地域、例えば日本では、テキストはから書かれています 上から下へ. SVGでは、これを使用して行うことができます。 書き込みモード 属性.
ぁぃぅぇぉあきき
上の例では、私たちはいくつかのランダムな日本語の文字を入れて（私には意味がわからない、私は本当にわからない）そしてこのスタイル宣言で向きを変えている, 書き込みモード：tb, どこで TB の略です 上から下へ.
テキストアウトライン
SVGのテキストは基本的にグラフィックです, だから我々も適用することができます ストローク 他の図形と同じようにテキストに境界線を追加する属性.
上記のコードスニペットでは、 ストローク の属性 塗りつぶし の属性 無し これにより、次のテキストが表示されます。.
テキストパス
SVGでは、テキストは水平方向と垂直方向に表示できるだけでなく、 パスパターンに従う. ここにそれを行う方法があります.
まず、定義する必要があります パス. しかし、HTMLで直接Pathを作成することはそれほど直感的ではありません、私達が私達のほとんどが避けようとしていると思う座標といくつかのコマンドを理解する必要があります。だから、このステップをより簡単にするために、私は個人的にベクトルエディタ（InkscapeまたはIllustrator）を開き、パスを作成してSVGコードを生成することをお勧めします。.
その後、 defs ここでは定義を意味します.
また、 id の属性 id 私達のテキストに
Loremイプサムdolor座ってamet consectetur.
参考文献： SVGパス
テキストグラデーション
テキストを塗りつぶすために背景を追加することもSVGで可能です、そしてあなたが上のテキストパスセクションで成功したなら、これははるかに簡単でしょう.
まず、グラデーションカラーを定義する必要があります.
必要な定義がすべて設定されたら、今度はテキストを追加して参照するだけで済みます。 塗りつぶし グラデーションの属性 id 次のような属性
勾配
そしてこれが、グラデーション付きのテキストです.
参考文献： SVGグラデーションとパターン
その他の参考文献
SVGのテキストは間違いなく強力です。実際には、この記事で取り上げることができること以外にできることはたくさんあります。そのため、以下では、この主題に対するあなたの興味に役立つように、さらにいくつかの参照をまとめました。.
- SVG - Divya Manianのフォントについて
- SVG Textオフィシャルドキュメンテーション - W3.org
- Mozilla DevでのSVG Dovumentation。例とツールを使用したネットワーク - MDN
- SVG書き込みモード属性 - MDN
- デモを見る
- ソースをダウンロード
