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

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

更新

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

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 不喜欢我们指定 dy在 <text> 上元素。但是如果 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您使用的每种字体和字体大小的值。