その他の text 要素で使用できる属性やスタイルなどをまとめました。

文字色を変更する

text 要素で表示されたテキストの文字色を変更するには、fill 属性を使用します。透明度は fill-opacity 属性で変更できます。

<svg width="600" height="200">
    <rect x="50" y="50" width="500" height="100" fill="#00CFB4" fill-opacity="0.5"/>
    <text x="80" y="105" fill="#fff" fill-opacity="0.8">この部分の文字列が表示されます。</text>
</svg>

ブラウザでの表示

書体や文字サイズを変更する

書体や文字サイズを変更したい場合は、通常の CSS と同じように font-family 属性や、font-size 属性を使用して変更することができます。

<svg width="600" height="200">
    <rect x="50" y="50" width="500" height="100" fill="#F6675C" fill-opacity="0.5"/>
    <text x="80" y="110" font-family="Serif" font-size="25">明朝体へ変更して文字を大きくします。</text>
</svg>

ブラウザでの表示

文字に枠線を加える

stroke 属性は text 要素にも使用でき、文字に縁取りを加えることが可能です。縁取りの位置は 中央 となり文字の境界部分に付けられます。

<svg width="600" height="200">
    <rect x="50" y="50" width="500" height="100" fill="#00CFB4" fill-opacity="0.5" />
    <text x="85" y="115" fill="#fff" font-weight="bold" font-size="40" stroke="#999">文字に縁取りをつける。</text>
</svg>

ブラウザでの表示

文字列内の一部のスタイルを変更する

文字列内の一部のスタイルを変更する場合は、tspan 要素を使用します。sapnタグと同じような役割の要素で、使用方法も span タグのように変更したい文字列を tspan 要素で囲む形になります。

<svg width="500" height="200">
    <rect x="50" y="50" width="500" height="100" fill="#F6675C" fill-opacity="0.5" />
    <text x="150" y="105" >テキストの<tspan font-size="30">一部</tspan>を変更する。</text>
</svg>

ブラウザでの表示

文字を Path 要素の形にあわせて配置する

文字を Path 要素の形にあわせて配置するには、textpath 要素を使用します。

まずは path 要素でペジェ曲線を描写し、id を振っておきます。text 要素の中に textpath 要素を置き、パスに沿わせたい文字列を記入します。textpath 要素には xlink:href 属性でパスの id を指定します。

元となった path 要素には defs 要素で囲み定義文という位置づけに変更し、表示されないようにします。

<svg width="600" height="200">
<defs><path id="textpath" d="M65.000,157.000 C65.000,157.000 113.172,75.000 224.000,76.000 C334.828,77.000 314.172,158.000 426.000,156.000 C537.828,154.000 579.000,77.000 579.000,77.000 "/></defs>
<text>
    <textpath xlink:href="#textpath">テキストをパスに合わせて表示する。テキストをパスに合わせて表示する。</textpath>
</text>
</svg>

ブラウザでの表示

SVG 描写内にテキストを表示する場合は text 要素を使用します。text 要素に文字を表示する位置の座標を x属性と y属性で記入し、表示したい文字列を text 要素で囲います。指定した座標がテキストのベースラインとなります。

<svg width="300" height="200">
    <circle cx="150" cy="100" r="80" fill="#F6675C" fill-opacity="0.6" />
    <text x="25" y="100">この部分の文字列が表示されます。</text>
</svg>

ブラウザでの表示

文字の位置をばらばらにする

文字の位置をバラバラにするには、x属性 y属性それぞれに文字個別の座標を半角スペースで区切って記入します。文字数分の各属性値が指定されていない場合は、最後に指定されている位置でのこりの文字を表示します。

<svg width="600" height="200">
    <rect x="50" y="50" width="500" height="100" fill="#00CFB4" fill-opacity="0.5"/>
    <text x="80 95 130 147 180" y="105 105 95 95 105">この部分の文字列が表示されます。</text>
</svg>

ブラウザでの表示

文字の行揃えを設定する

行揃えを設定する場合は、text-anchor 属性を使用します。属性の値は、start が左揃え（デフォルト値）、middle が中央揃え、end が右揃えとなっています。

行揃えといっても、SVG 要素のサイズにあわせて行揃えというわけではなく、指定した x属性の座標を起点として、xの位置をスタート値とするのが start、xの位置を文字列の中央とするのが middle、xの位置を文字列の右端とするのが end。といった形になります。

<svg width="500" height="200">
    <rect x="50" y="50" width="500" height="100" fill="#F6675C" fill-opacity="0.5" />
    <text x="200" y="85" text-anchor="start">1. デフォルトのテキスト表示。</text>
    <text x="200" y="110" text-anchor="middle">2. middle のテキスト表示。</text>
    <text x="200" y="135" text-anchor="end">3. end のテキスト表示。</text>
</svg>

ブラウザでの表示

文字を指定した座標よりもずらして表示する

文字を指定した座標よりもずらして表示するには、dx属性と dy属性を使用します。指定した座標よりも左右に移動させたい場合は dx属性、指定した座標よりも上下に移動させたい場合は dy属性にずらしたい値を指定します。

<svg width="500" height="200">
    <rect x="50" y="50" width="500" height="100" fill="#00CFB4" fill-opacity="0.5" />
    <text x="200" y="85">1. デフォルトの位置。</text>
    <text x="200" y="110" dx="50">2. 左へ50px移動。</text>
    <text x="200" y="135" dy="30">3. 下へ30px移動。</text>
</svg>

ブラウザでの表示

文字を回転して表示する

文字を回転して表示するには、rotate 属性を使用します。属性の値には傾きの度数を数値で指定します。

<svg width="500" height="200">
    <rect x="50" y="50" width="500" height="100" fill="#F6675C" fill-opacity="0.5" />
    <text x="170" y="100" rotate="20">テキストを傾けて表示する。</text>
</svg>

ブラウザでの表示

文字を均等割付けで表示する

文字を指定した長さで均等割付け表示するには、textLength 属性を使用します。属性の値には文字を表示したい長さを指定します。均等割り付けした上で、文字の文字との間隔を文字列の横幅で埋めたい場合は lengthAdjust属性に spacingAndGlyphs を指定します。デフォルトは間隔は空白にする spacing となっています。

<svg width="500" height="200">
    <rect x="50" y="50" width="500" height="100" fill="#00CFB4" fill-opacity="0.5" />
    <text x="130" y="95" textLength="300">テキストを均等割付けする。</text>
    <text x="80" y="120" textLength="400" lengthAdjust="spacingAndGlyphs">均等割付けし間隔を文字の幅で埋める。</text>
</svg>

ブラウザでの表示

文字を縦書きで表示する

文字を縦書きで表示するには、writing-mode 属性を使用し、値に tb を設定します。

<svg width="500" height="200">
    <rect x="50" y="50" width="500" height="100" fill="#F6675C" fill-opacity="0.5" />
    <text x="130" y="65" writing-mode="tb">たてがき</text>
</svg>

ブラウザでの表示