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

Text 将SVG文本与其他SVG对象垂直对齐以使用Inkscape,text,svg,vertical-alignment,inkscape,Text,Svg,Vertical Alignment,Inkscape,我试图在另一个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&g

我试图在另一个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还不支持以
为主的基线样式进行垂直对齐。(虽然与
文本锚定的水平对齐似乎得到了很好的支持。)但我需要Inkscape支持。我发现了一个在Inkscape中似乎有效的
转换
-hack,但我不知道如何获得与
主导基线:边前文本
-effect相同的效果。()

更新
我使用浏览器和JavaScript生成svg。因此,可以(重新)计算SVG文本元素在浏览器中的位置,使其可用于Inkscape。然而,即使这个扩展是显式的(从上面建议的
转换
-hack中是隐式的),我仍然缺少一个解决方案。

试试
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>

Inkscape将很好地加载它。唯一的问题是,您必须为您使用的每种字体和字体大小调整
dy
值。

我刚刚解决了一个与您类似的问题,并想分享我的方法

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

最后,我试图通过在所选字体上实际渲染大写字母“M”(Droid Sans,现在是)来计算基线,然后使用查询的高度来计算基线偏移:

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

是。。。非常粗糙,但与inkscape配合使用效果很好。

谢谢您的回答。不幸的是,Inkscape中没有
dy
支持。所以这是行不通的。(同样,将
dy
设置为
1em
甚至不会产生与Firefox中
style=“显性基线:边缘前文本”
相同的结果。这在字体尺寸更大时变得更为明显,例如
100
。边界框不再接触线条。)我尝试并找到了一个有效的解决方案——如果你能接受这些限制的话。谢谢你的更新。对于我的配置(Windows上的Firefox),这次边界框有点太高了。它似乎适用于字体大小90%的
dy
。但是,右侧的
dy
将高度依赖于所使用的字体。所以这对我来说是一个非常有限的解决方案,因为我需要使用不同的字体(甚至是我无法事先检查的自定义字体)。看起来很奇怪,要完成这么简单的任务有多难。不知何故,应该可以计算给定字体的基线在边界框中的位置。
$baseline=$fontSize*$previousBaseline/$previousFontSize;