28 lines
1.3 KiB
XML
28 lines
1.3 KiB
XML
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
|
<rect width="100%" height="100%" fill="white"/>
|
|
|
|
<g transform="matrix(2 0 0 3 100 136)">
|
|
<!-- Explanation of the transform above:
|
|
|
|
The bug is about text-anchor="middle" not working properly when there is a
|
|
transform with scaling.
|
|
|
|
So, we create a transform with horizontal scaling 2, and vertical scaling 3.
|
|
Then we translate by 100 pixels horizontally (200/2 of the viewBox width), and
|
|
136 pixels vertically, because of the following:
|
|
|
|
In the Ahem font, each glyph is a square - https://web-platform-tests.org/writing-tests/ahem.html
|
|
|
|
The ascent above the baseline is 0.8em, and the descent below the baseline
|
|
is 0.2em. So, at font-size=40 it means the top is 0.8*40 = 32 units above the baseline. Since
|
|
the vertical scaling factor is 3, we translate by 32*3=96 pixels in the Y axis, plus an additional
|
|
(200 - (40 * 3)) / 2 = 40 pixels, thus adding up to the 136 pixels in the transform above.
|
|
|
|
The vertical translation will center the glyph vertically in the available space.
|
|
|
|
The bug is about the glyph not being horizontally centered in the available space.
|
|
-->
|
|
<text x="0" y="0" fill="black" font-family="Ahem" font-size="40" text-anchor="middle">W</text>
|
|
</g>
|
|
</svg>
|