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!
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.
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)
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments