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

Posted 2023-03-05

【中文标题】将 SVG 文本与其他 SVG 对象垂直对齐以使用 Inkscape

【英文标题】：Vertical align SVG text with other SVG object to work with Inkscape

【发布时间】：2014-06-03 17:02:00

【问题描述】：

我正在尝试在另一个 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 支持。我发现了一个似乎在 Inkscape 中工作的transform-hack，但我不知道如何获得与dominant-baseline: text-before-edge-效果相同的效果。 (How to center SVG text vertically in IE9)

更新

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

【参考方案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...

更新

好的。如果我们在 <text> 元素上指定 dy，看起来 Inkscape 不喜欢它。但如果dy 位于<tspan> 上也没关系。此外，它不会接受 ems 作为一个单位。它需要像素。因此，如果我们相应地更新我的示例：

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

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

【讨论】：

感谢您的回答。不幸的是，Inkscape 中没有 dy 支持。所以这不起作用。 （同样将dy 设置为1em 甚至不会给出与Firefox 中的style="dominant-baseline: text-before-edge" 相同的结果。这在更高的字体大小下变得更加明显，例如100。边界框不再接触线。）

我尝试并找到了一个可行的解决方案 - 如果您能接受这些限制。

感谢您的更新。这次边界框对于我的配置（Windows 上的 Firefox）来说有点太高了。它似乎适用于字体大小的 90% 的dy。但是，正确的dy 将高度依赖于所使用的字体。所以这对我来说是一个非常有限的解决方案，因为我需要使用不同的字体（甚至是我无法事先检查的自定义字体）。看起来很奇怪，要完成这样一项简单的任务是多么困难。不知何故，应该可以计算给定字体的基线在边界框中的位置。

【参考方案2】：

我刚刚解决了像你这样的问题，想分享我的方法。

我正在渲染一个文本，并且我已经在使用 inkscape --query-all tempfile.svg 来获取关于我想要排版的行长的指标。

我最终试图通过在所选字体上实际呈现大写“M”（Droid Sans，现在）然后使用查询的高度来计算基线找出基线偏移量：

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

它...非常粗糙，但它与inkscape 配合得很好。