xml 对齐 SVG 中的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/56402/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Aligning text in SVG
提问by Ian G
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.
我正在尝试使用行和简短文本片段（通常为两个或三个单词）的混合来制作 SVG XML 文档。我遇到的主要问题是让文本与线段对齐。
For horizontal alignment I can use text-anchorwith left, middleor right. I can't find a equivalent for vertical alignment; alignment-baselinedoesn't seem to do it, so at present I'm using dy="0.5ex"as a kludge for centre alignment.
对于水平对齐方式，我可以使用text-anchor与left，middle或right。我找不到垂直对齐的等价物；alignment-baseline似乎没有这样做，所以目前我正在使用dy="0.5ex"作为中心对齐的kludge。
Is there a proper manner for aligning with the vertical centre or top of the text?
是否有正确的方式与文本的垂直中心或顶部对齐？
采纳答案by Ian G
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.
事实证明，您不需要明确的文本路径。Firefox 3 仅部分支持垂直对齐标记（请参阅此线程）。似乎显性基线仅在作为样式应用时才有效，而文本锚点可以是样式或标签属性的一部分。
<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>
This works in Firefox. Unfortunately Inkscape doesn't seem to handle dominant-baseline (or at least not in the same way).
这适用于 Firefox。不幸的是，Inkscape 似乎并没有处理显性基线（或者至少不是以同样的方式）。
回答by mjswensen
This effect can indeed be achieved by setting alignment-baselineto centralor middle.
这种效果确实可以通过设置alignment-baseline为central或来实现middle。
