CSS 将文本行与 SVG 中的中心对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23272040/
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
Align lines of text to center in SVG
提问by BartoNaz
I need to output multiple lines of text in SVG. For that I'm using the following scheme:
我需要在 SVG 中输出多行文本。为此，我使用以下方案：
<text>
<tspan> First line </tspan>
<tspan> Second line </tspan>
</text>
First and second line of the text can have different number of characters, which can change dynamically. I want the second line to appear under the first line and text in both of them to be centered.
文本的第一行和第二行可以有不同的字符数，可以动态更改。我希望第二行出现在第一行下方，并且这两行中的文本都居中。
I can make second line appear below the first line by adding dy="15"for the second <tspan>.
我可以让第二条线通过添加出现在第一线下方dy="15"第二<tspan>。
I can align the text in each individual <tspan>by adding text-anchor="middle"to it.
我可以<tspan>通过添加text-anchor="middle"来对齐每个人中的文本。
But how to do relative centric alignment of those <tspan>'s?
但是如何做那些<tspan>的相对中心对齐？
I tried to use x="0"for each <tspan>but apparently it doesn't work since each <tspan>has different width and the rendered text in the shorter line is shifted to the left.
我试图x="0"为每个使用，<tspan>但显然它不起作用，因为每个<tspan>都有不同的宽度并且较短行中呈现的文本向左移动。
Is there a way to align centres of 2 <tspan>'s of different width using only CSS and/or SVG.
有没有办法<tspan>只使用 CSS 和/或 SVG来对齐不同宽度的 2的中心。
回答by helderdarocha
If you add text-anchor="middle"to eachtspanyou will center them (you have to remove the space betweenthe tspans as well, otherwise the extra space will be considered as part of the first line and they won't be completely centered).
如果添加text-anchor="middle"到每个中tspan，则将它们居中（您还必须删除tspans之间的空间，否则额外的空间将被视为第一行的一部分，它们不会完全居中）。
For example:
例如：
<svg>
<text y="50" transform="translate(100)">
<tspan x="0" text-anchor="middle">000012340000</tspan><tspan x="0" text-anchor="middle" dy="15">1234</tspan>
</text>
</svg>
See: JSFiddle
请参阅：JSFiddle
回答by Imran Bughio
text-anchor='start'for right align.
text-anchor='start'用于右对齐。
text-anchor='middle'for middle align.
text-anchor='middle'用于中间对齐。
text-anchor='end'for left align.
text-anchor='end'用于左对齐。
Code from demo:
演示代码：
<svg width="100%" height="230" viewBox="0 0 120 230"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- Materialisation of anchors -->
<path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" />
<!-- Anchors in action -->
<text text-anchor="start"
x="60" y="40">This text will align right</text>
<text text-anchor="middle"
x="60" y="75">This text will align middle</text>
<text text-anchor="end"
x="60" y="110">This text will align left</text>
<!-- Materialisation of anchors -->
<circle cx="60" cy="40" r="3" fill="red" />
<circle cx="60" cy="75" r="3" fill="red" />
<circle cx="60" cy="110" r="3" fill="red" />
<style><![CDATA[
text{
font: bold 15px Verdana, Helvetica, Arial, sans-serif;
}
]]></style>
</svg>
Read more about text-anchor property here
在此处阅读有关 text-anchor 属性的更多信息
回答by Eric
Key points to horizontally centering the text:
1. x="50%"
2. text-anchor='middle'
使文本水平居中的要点：
1. x="50%"
2.text-anchor='middle'
In your case, you may write as:
在你的情况下，你可以写成：
<svg style="width:100%">
<text y="50">
<tspan x="50%" text-anchor="middle"> First line </tspan>
<tspan x="50%" dy="15" text-anchor="middle"> Second line </tspan>
</text>
</svg>
