CODEWITHSUNDEEP
svg
wheeler
wheeler

Reputation: 3241

Why are the SVG Text elements too high?

I noticed the the root coordinates for a text element are not at the top left corner like a rect element:

enter image description here

Is there a way to set it such that when a text element is at (0,0), it fits inside the parent element?

Upvotes: 0

Views: 350

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101820

Why are the SVG Text elements too high?

The x and y coordinates of a <text> element specify the start of the baseline of the text. This makes complete sense. You wouldn't want it to be the top left of the first character - because it would then be a difficult job to get text of different sizes and styles to line up.

There is no global option in SVG that changes that behaviour. However see below for alternatives)

Is there a way to set it such that when a text element is at (0,0), it fits inside the parent element?

Normally you would just adjust the y coordinate based on the font size.

However there are a couple of alternatives you can use:

  1. One is the xxx-baseline properties (as @gengns has pointed out), that can alter how the character glyphs are positioned relative to the baseline. Note however, that those attributes are not entirely reliable, due to mixed browser support. Plus they depend on the font containing the correct data tables. Not all fonts have those tables.

  2. A better option IMO is to use the dy attribute. This adds a relative offset to the text position. Meaning the text is actually positioned at (x, y + dy). And it is supported by all browsers.

<svg width="200" height="150">

  <rect x="0" y="0" width="200" height="150" fill="skyblue"/>

  <text x="0" y="0"
        font-size="25px" dy="1em">asd</text>
  
</svg>

Upvotes: -1

gengns
gengns

Reputation: 1653

If I understood you well, you can use this:

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline

A) Chromium browsers

svg {
  dominant-baseline: hanging;
}

https://jsfiddle.net/e7vc4bqj/

B) Chromium and Firefox

.text {
  dominant-baseline: hanging;
}

https://jsfiddle.net/3zskd148/

SVG text coordinates are used to define its left bottom corner by default: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor

Hope this help :)

Upvotes: 3

Related Questions