CODEWITHSUNDEEP
csssvg
florentine
florentine

Reputation: 657

SVG text getting cut off

When I have a simple svg like this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text style="font-size: 24px;">Sample Title</text>
    <text style="font-size: 12px;">Sample Subtitle</text>
</svg>

The words are cut off as if it is extending past the top of the viewport like this: https://i.sstatic.net/fAN4Z.png

If I add y="24" to the title text tag and y="36" to the subtitle text tag (where y has to be >= the font size), then it is not cut off: https://i.sstatic.net/beoee.png

Why is this?

Upvotes: 1

Views: 2569

Answers (1)

Peter Collingridge
Peter Collingridge

Reputation: 10979

If you don't include the y attribute then it defaults to 0. If you draw the text with a y position of 0, then its baseline is at the top of the image and you'll only see the letter that hang below the baseline.

SVG is primarily a language for describing graphics, so all elements are position with (x, y) coordinates, as opposed to HTML, which is markup language so text flows more naturally.

Upvotes: 2

Related Questions