vertical alignment of text element in SVG

svg vertical-alignment w3c
SeMeKh picture SeMeKh · Sep 3, 2012 · Viewed 106.2k times · Source

Let's say I have the SVG file:

<svg width="1024" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text x='20' y='60' style="font-size: 60px">b</text>
    <text x='100' y='60' style="font-size: 60px">a</text>
</svg>

I want to somehow align the top of a and b. Actually, I want my positioning to be according to the roofline instead of baseline!

Answer

toutankh picture toutankh · Apr 14, 2013

According to SVG spec, alignment-baseline only applies to <tspan>, <textPath>, <tref> and <altGlyph>. My understanding is that it is used to offset those from the <text> object above them. I think what you are looking for is dominant-baseline.

Possible values of dominant-baseline are:

auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit

Check the W3C recommendation for the dominant-baseline property for more information about each possible value.

Related questions

Vertical Alignment of SVG in CSS

I have a problem with inline SVG alignment. I have created a button with some text and an SVG. And while the alignment works correctly when the SVG is at least as big as the text it fails when the …

Read More
How to change the color of an svg element?

I want to use this technique http://css-tricks.com/svg-fallbacks/ and change the svg color but so far I haven't been able to do so. I put this in the css but my image is always black, no matter what. …

Read More
How to change color of SVG image using CSS (jQuery SVG image replacement)?

This is a self Q&A of a handy piece of code I came up with. Currently, there isn't an easy way to embed an SVG image and then have access to the SVG elements via CSS. There are …

Read More