SVG
テキスト

パラメーター

備考

テキストを描く

<svg xmlns="http://www.w3.org/2000/svg">
    <text x="40" y="60" font-size="28">Hello World!</text>
</svg>

x座標とy座標は、テキストのアンカーが変更されていない限り、テキストの左下隅の位置を指定します。

スーパーとサブスクリプト

baseline-shiftパラメータを使用すると、スーパーまたはサブスクリプトを指定できます。しかし、これはすべての主要なブラウザでサポートされているわけではありません。

<svg xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="20">x<tspan baseline-shift="super">2</tspan></text>
    <text x="10" y="60">f<tspan baseline-shift="sub">x</tspan></text>
</svg>

クロスブラウザソリューションでは、dy、dx、および相対フォントサイズを使用できます。

<svg xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="40">x<tspan dy="-7" font-size=".7em">2</tspan></text>
    <text x="10" y="80">f<tspan dy="3" font-size=".7em">x</tspan></text>
</svg>

テキストを回転する

rotateプロパティは、各文字を指定された角度だけ回転させます。

<svg xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="20" rotate="30">Each character is rotated</text>
</svg>

テキスト要素全体を回転するには、transformプロパティを使用する必要があります。

<svg xmlns="http://www.w3.org/2000/svg">
    <text transform="translate(10, 60) rotate(30)">The whole text is rotated</text>
</svg>

X＆Y値の配列による個々の文字の配置

<svg width="400px" height="200px"> 
 <text x="1em, 2em, 3em, 4em, 5em" y="3em, 4em, 5em">
    Individually Spaced Text
  </text>
</svg>

Text要素は、xとyの値の配列を受け入れることによって、文字の個々の配置をサポートします。