问题描述
我正在尝试使SVG XML文档混合使用行和简短的文本片段(通常为两个或三个单词).我遇到的主要问题是使文本与线段对齐.
I am trying to make SVG XML documents with a mixture of lines and brief text snippets (two or three words typically). The major problem I'm having is getting the text aligning with line segments.
对于水平对齐，我可以将text-anchor与left，middle或right结合使用.我找不到等效的垂直对齐方式. alignment-baseline似乎没有做到这一点，所以目前我正在使用dy="0.5ex"作为中心对齐的摇杆.
For horizontal alignment I can use text-anchor with left, middle or right. I can't find a equivalent for vertical alignment; alignment-baseline doesn't seem to do it, so at present I'm using dy="0.5ex" as a kludge for centre alignment.
是否有适当的方式与文本的垂直中心或顶部对齐?
Is there a proper manner for aligning with the vertical centre or top of the text?
推荐答案
事实证明，您不需要显式的文本路径. Firefox 3仅部分支持垂直对齐标记(请参阅此线程).似乎主要基准线仅在作为样式应用时才有效，而文本锚可以是样式或标签属性的一部分.
It turns out that you don't need explicit text paths. Firefox 3 has only partial support of the vertical alignment tags (see this thread). It also seems that dominant-baseline only works when applied as a style whereas text-anchor can be part of the style or a tag attribute.
<path d="M10, 20 L17, 20"
style="fill:none; color:black; stroke:black; stroke-width:1.00"/>
<text fill="black" font-family="sans-serif" font-size="16"
x="27" y="20" style="dominant-baseline: central;">
Vertical
</text>
<path d="M60, 40 L60, 47"
style="fill:none; color:red; stroke:red; stroke-width:1.00"/>
<text fill="red" font-family="sans-serif" font-size="16"
x="60" y="70" style="text-anchor: middle;">
Horizontal
</text>
<path d="M60, 90 L60, 97"
style="fill:none; color:blue; stroke:blue; stroke-width:1.00"/>
<text fill="blue" font-family="sans-serif" font-size="16"
x="60" y="97" style="text-anchor: middle; dominant-baseline: hanging;">
Bit of Both
</text>
这在Firefox中有效.不幸的是，Inkscape似乎无法处理主导基线(或至少不能以相同的方式).
This works in Firefox. Unfortunately Inkscape doesn't seem to handle dominant-baseline (or at least not in the same way).
这篇关于在SVG中对齐文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！