vertical alignment of text element in SVG

Question

Let s say I have the SVG file    lt svg width  1024  height  768  xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  gt       lt text x  20  y  60  style  font-size  60px  gt b lt  text gt       lt text x  100  y  60  style  font-size  60px  gt a lt  text gt   lt  svg gt    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

User · Answer

If you re testing this in IE  dominant-baseline and alignment-baseline are not supported   The most effective way to center text in IE is to use something like this with  dy     lt text font-size  ANY SIZE  text-anchor  middle   dy   - 4em  gt  Ya Text  lt  text gt    The negative value will shift it up and a positive value of dy will shift it down   I ve found using - 4em seems a bit more centered vertically to me than - 5em  but you ll be the judge of that

User · Answer

According to SVG spec  alignment-baseline only applies to  lt tspan gt    lt textPath gt    lt tref gt  and  lt altGlyph gt   My understanding is that it is used to offset those from the  lt text gt  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

User · Answer

After looking at the SVG Recommendation I ve come to the understanding that the baseline properties are meant to position text relative to other text  especially when mixing different fonts and or languages  If you want to postion text so that it s top is at y then you need use dy    y   the height of your text

User · Answer

attr  dominant-baseline    central

User · Answer

The alignment-baseline property is what you re looking for it can take the following values  auto   baseline   before-edge   text-before-edge    middle   central   after-edge   text-after-edge    ideographic   alphabetic   hanging   mathematical    inherit   Description from w3c     This property specifies how an object is aligned with respect to its   parent  This property specifies which baseline of this element is to   be aligned with the corresponding baseline of the parent  For example    this allows alphabetic baselines in Roman text to stay aligned across   font size changes  It defaults to the baseline with the same name as   the computed value of the alignment-baseline property  That is  the   position of  ideographic  alignment-point in the   block-progression-direction is the position of the  ideographic    baseline in the baseline-table of the object being aligned    W3C Source  Unfortunately  although this is the  correct  way of achieving what you re after it would appear Firefox have not implemented a lot of the presentation attributes for the SVG Text Module   SVG in Firefox  MDN Documentation

[svg] vertical alignment of text element in SVG

Examples related to svg

Examples related to vertical-alignment

Examples related to w3c