Inside a text
element a tspan
allows to style specific parts of text.
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>
The tspan
is correctly located after the text.
However, when font-size
exceeds 200px
the position starts to behave differently.
The content of text
gets also affected. If you wish, you can inspect yourself.
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>
The bigger font, the bigger the difference. Here is the result of font-size
at 400px
.
Relative units (em
and %
) have been tested.
Other text
-related elements (a
) have also been tested.