SVGのテキスト

ベクターグラフィックスの研究を続けますが、今回はSVGのテキストを扱います。これにより、通常のHTMLよりもはるかに多くのことができるようになります。







前の記事： SVGグラフィックスの 理解とSVGグラフィックスのスタイル設定



まず、基本的な構文を検討します。これは、ベースラインを定義するx座標とy座標を持つテキストタグです。

<svg> <text x="0" y="15">This is Scalable Vector Graphic (SVG) Text</text> </svg>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このようなSVGテキストは通常​​と変わりません：

様式化

テキストは、CSSを使用してスタイル設定できます。通常のHTMLと同様に、フォントウェイト、フォントスタイル、およびテキスト装飾です。 単一の要素にスタイルを適用する必要がある場合は、 tspanタグを使用する必要があります。

 <svg> <text x="0" y="15"><tspan style="font-weight: bold;">This is bold</tspan>, <tspan style="font-style: italic;">this is italic</tspan> and <tspan style="text-decoration: underline;">this is underline</tspan></text> </svg>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

書き方

テキストの向きを通常の（左から右へ）から他のテキストに変更することができます。たとえば、日本の場合、 writing-modeを使用して上から下に変更できます。tb構造。tbは「上から下」です。

 <svg> <text x="70" y="20" style="writing-mode: tb;" class="japanese">???????</text> </svg>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テキストアウトライン

SVGテキストは主にベクトル画像なので、 アウトラインを使用してストロークを追加し、fillで塗りつぶしを変更できます。

 <svg> <text x="0" y="50px" font-size="50px" font-weight="bold" stroke="black" stroke-width="0.5" fill="none">This is SVG Text</text> </svg>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ガイド

SVGでは、テキストは水平方向または垂直方向だけでなく、ガイド（ベクトルカーブ）に沿って表示できます。 ペンツールを使用して、グラフィックエディター（Adobe Illustratorなど）で類推を見つけることができます。







コードにはpath タグとdefsタグが必要です：

 <defs> <path id="textpath" fill="none" stroke="#000000" d="M0.057,0.024c0,0,10.99,51.603,102.248,51.603c91.259,0,136.172,53.992,136.172,53.992"/> </defs>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、 textPathを使用して、ガイドに沿ってテキストを 「実行」する必要があります。

 <use xlink:href="#textpath"/> <text x="10" y="100"> <textPath xlink:href="#textpath"> Lorem ipsum dolor sit amet consectetur. </textPath> </text>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

勾配

グラデーションを追加してテキストを塗りつぶすこともできます。 まず、色を設定する必要があります。

 <defs> <linearGradient id="textgradient" x1="0%" x2="0%" y1="0%" y2="100%"> <stop stop-color="#999" offset="0%"/> <stop stop-color="#111" offset="100%"/> </linearGradient> </defs>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そしてfillでグラデーションを適用します：

 <text x="0" y="80" font-size="72" font-weight="bold" fill="url(#textgradient)" stroke="none">Gradient</text>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

フォント

Webセーフフォントを使用するには、単純な構成（ デモ ）で十分です。

 <text x="100" y="100" style="font-family: impact, georgia, times, serif; font-weight: normal; font-style: normal"> Text using web safe font </text>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

@ font-faceを使用するには、 defsタグでフォントを宣言する必要があります。操作の原理はHTMLと同じになります（ demo ）。

 <defs> <style type="text/css"> <![CDATA[ @font-face { font-family: Delicious; src: url('http://nimbupani.com/demo/svgfonts/delicious-roman.otf'); } ]]> </style> </defs> <text x="100" y="100" style="font-family: 'Delicious'; font-weight:normal; font-style: normal"> Text using CSS @font-face </text>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、2つの方法で使用できるSVGフォント（拡張子.svg、 いくつかの例 ）があります。外部SVGフォントを呼び出すか、すでに組み込まれている.svgファイルを使用します。 この記事では、これらの方法について詳しく説明します。



SVGフォントを使用する利点：

• SVGファイルを表示できるブラウザーまたはプログラムでサポートされています
• 1つのファイルに複数のフォントを保存できます
• オープンソース
• 最新のブラウザーのサポート

結論

SVGテキストの使用は、通常のHTMLよりもはるかに柔軟です。 主なことは、このツールを適切に場所に適用できるようにすることです。 IE 8以下ではSVGがサポートされていないことを思い出してください。



すべての例のデモ / ソースのダウンロード



読むのに便利：

• SVG Text公式ドキュメント -W3.org
• SVGのフォントについて -Divya Manian
• SVGフォント：How To -Fr B
• hongkiat.com のサンプルのオリジナル
• Mozilla DevでのSVG Dovumentation。 例とツールを備えたネットワーク -MDN
• SVG書き込みモード属性 -MDN