我试图在另一个 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 中隐含),我仍然缺乏解决方案。
最佳答案
尝试使用 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
您使用的每种字体和字体大小的值。
关于text - 将 SVG 文本与其他 SVG 对象垂直对齐以与 Inkscape 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23166767/