Why does tspan position incorrectly over 200px font size?

143 views Asked by At

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.

Standard tspan position

However, when font-size exceeds 200px the position starts to behave differently.

Incorrect tspan position

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.

Incorrect tspan position with bigger font

Relative units (em and %) have been tested. Other text-related elements (a) have also been tested.

0

There are 0 answers