CODEWITHSUNDEEP
svg
Chazy Chaz
Chazy Chaz

Reputation: 1851

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...

Upvotes: 0

Views: 174

Answers (2)

chikadance
chikadance

Reputation: 4167

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>

Upvotes: 0

Robert Longson
Robert Longson

Reputation: 123996

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.

Upvotes: 1

Related Questions