'svg: why does y="0" start outside the viewport instead of in the top edge for text?

This is the only thing preventing me from understanding how the coordination system works...

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="600" height="400" x="0" y="0">  
    <text x="0" y="0">  
        <tspan>&#x2709;</tspan>
    </text>  
</svg>

If the y-axis points down why does y="0" start from the outside of the viewport? Shouldn't it start right at the top edge? It blows my logic away...

The x-axis points to the right and it starts right in the left edge of the viewport, now this is logic and normal behavior.

Why does the y-axis behave like this? Or why make one start from the outside and the other not? What is the logic behind this? Unless I'm misunderstanding how it works...

svg


Solution 1:[1]

It's all in the SVG specification

the initial coordinate system has the origin at the top/left with the x-axis pointing to the right and the y-axis pointing down

The origin for text is basically the bottom left corner of the glyph for left-to-right text.

For most uses of Latin text (i.e., writing-mode:lr, text-anchor:start and alignment-baseline:baseline) the alignment-point in the glyph will be the intersection of left edge of the glyph cell (or some other glyph-specific x-axis coordinate indicating a left-side origin point) with the Latin baseline of the glyph.

Solution 2:[2]

default baseline is in text downside, can use attr dominant-baseline change baseline, here is mdn example

<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
    <path d="M20,20 L180,20 M20,50 L180,50 M20,80 L180,80" stroke="grey" />

    <text dominant-baseline="auto" x="30" y="20">Auto</text>
    <text dominant-baseline="middle" x="30" y="50">Middle</text>
    <text dominant-baseline="hanging" x="30" y="80">Hanging</text>
</svg>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Robert Longson
Solution 2 chikadance

Related Questions