使用Inkscape使SVG文本与其他SVG对象垂直对齐

Question

我正在尝试将SVG文本对齐到另一个SVG对象下面。这个包含SVG线条的示例在Firefox中运行良好：

<svg>
    <line x1='0' y1='100' x2='100' y2='100' stroke='red'/>
    <text x='50' y='100' text-anchor='middle' font-size='24' style="dominant-baseline: text-before-edge">Text</text>
</svg>

这个边界框正好从下方接触到线条，可以通过选择/突出显示文本来看到。

然而，不幸的是，Inkscape目前还不支持使用dominant-baseline样式进行垂直对齐。（虽然使用text-anchor进行水平对齐似乎得到了很好的支持。）但我需要Inkscape的支持。我发现一个transform-hack，在Inkscape中似乎有效，但我无法弄清如何获得与dominant-baseline: text-before-edge效果相同的效果。（如何在IE9中垂直居中SVG文本）

更新

我正在使用带有JavaScript的浏览器生成SVG。因此，重新计算浏览器中SVG文本元素的位置使其可用于Inkscape是可以的。然而，即使这个扩展已经显式地被做出（隐含在上面建议的transform-hack中），我仍然缺乏解决方案。

- Daniel

Answer 1

试试使用dy如何？

<svg>
    <line x1='0' y1='100' x2='100' y2='100' stroke='red'/>
    <text x='50' y='100' text-anchor='middle' font-size='24' dy="1em">Text</text>
</svg>

您可以通过调整em值来调整线下文本的位置。 只要字体相同，相同的em值应该适用于所有字体大小。 没有检查它是否与Inkscape兼容...

更新

好的。 看起来Inkscape不喜欢我们在

- Paul LeBeau

---

感谢您的回答。不幸的是，Inkscape中没有对“dy”的支持。所以这个方法行不通。（即使将“dy”设置为“1em”，也无法像在Firefox中设置“style = dominant-baseline：text-before-edge”一样获得相同的结果。尤其是在高字体大小下（例如100），边界框已经不能接触到线了。） - Daniel

我做了实验，找到了一个可以工作的解决方案——如果您能接受它的限制。 - Paul LeBeau

感谢更新。这次边界框对于我的配置（Windows上的Firefox）有点太高了。似乎使用字体大小的90%的dy可以解决问题。然而，正确的dy将高度依赖于所使用的字体。因此，这对我来说是一个过于严格的限制，因为我需要使用不同的字体（甚至是我无法预先检查的自定义字体）。看起来很奇怪，如此简单的任务竟然如此困难。某种程度上应该可以计算出给定字体的基线位于边界框中的位置。 - Daniel

Answer 2

我刚刚解决了一个类似你的问题，并想分享我的方法。

我正在渲染一段文本，我已经使用 inkscape --query-all tempfile.svg 来获取我想要排版的行长度的度量信息。

最终，我尝试通过在所选字体上实际渲染大写字母"M"（目前是Droid Sans）来确定基线，然后使用查询到的高度来计算基线偏移：

$baseline=$fontSize*$previousBaseline/$previousFontSize;

这个...非常粗糙，但它与inkscape很好地配合使用。

- ZJR