text
要素内ではtspan
、テキストの特定の部分にスタイルを設定できます。
html, body, svg
{
width : 100%;
height : 100%;
margin : 0;
background : black;
}
text
{
font-size : 100px;
fill : white;
}
<svg>
<text y='100'>
A <tspan>test</tspan>
</text>
</svg>
はtspan
、テキストの後に正しく配置されています。
ただし、位置font-size
を超える200px
と、動作が異なります。
の内容text
も影響を受けます。ご希望の方は、ご自身で検査可能です。
html, body, svg
{
width : 100%;
height : 100%;
margin : 0;
background : black;
}
text
{
font-size : 250px;
fill : white
}
<svg>
<text y='200'>
A <tspan>test</tspan>
</text>
</svg>
フォントが大きいほど、差が大きくなります。font-size
これがatの結果です400px
。
相対単位(em
および%
) はテスト済みです。
他のにtext
関連する要素( a
) もテストされています。