如何在svg文本中获得基线'dy'？

Question

对于svg文本元素坐标应用于基线的左下角。

我有一个宽度和高度已知的文字，因此我可以设置 row.height = 2 * text.height 然后我想在这行中放置2个文本元素，一个在另一个上面，我将text.y坐标设置为coordinate of top left corner of row + text.heigh * 2。 要将文本的底行设置在行边框的正上方，但此坐标应用于基线，因此文本很少降低。你可以在图片上看到它。

那么，如何知道基线偏移，设置文本坐标如

y = top left corner of row + height of text - baseline offset ？

我在Jsfiddle

上的例子

Answer 1

在SVG中真的没有办法做到这一点。您可以获取文本元素的边界框，甚至是单个字符的边界框。不幸的是，你得到的边界框是＆＃34; em box＆＃34; （屏幕显示中的蓝色框）而不是字形的实际边界。

Answer 2

@ paul-lebeau你提到的关于em盒子大小的答案给了我如何计算基线偏移量的想法。我们有em框左上角的坐标和文本元素基线的高度和坐标。所以

embox.y + embox.heigh - text_baseline.y == baseline_offset

因此我们可以设置文本坐标，如y = row.height - baseline_offset。 http://jsfiddle.net/6r14wnsw/1/

我发现更简单的收据http://jsfiddle.net/tpafwLmm/1/设置文字属性dominant-baseline="text-after-edge"会将基线移至embox的下边缘，text-before-edge - embox的上边缘。