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>
.
我可以通过为第二个
I can align the text in each individual <tspan>
by adding text-anchor="middle"
to it.
我可以通过添加text-anchor =“middle”来对齐每个
But how to do relative centric alignment of those <tspan>
's?
但是如何做那些
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.
我尝试对每个
Is there a way to align centres of 2 <tspan>
's of different width using only CSS and/or SVG.
有没有办法只使用CSS和/或SVG对齐不同宽度的2
3 个解决方案
#1
45
If you add text-anchor="middle"
to each tspan
you will center them (you have to remove the space between the tspans as well, otherwise the extra space will be considered as part of the first line and they won't be completely centered).
如果你为每个tspan添加text-anchor =“middle”,你将把它们居中(你必须删除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
#2
27
DEMO
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属性的更多信息
#3
3
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>
#1
45
If you add text-anchor="middle"
to each tspan
you will center them (you have to remove the space between the tspans as well, otherwise the extra space will be considered as part of the first line and they won't be completely centered).
如果你为每个tspan添加text-anchor =“middle”,你将把它们居中(你必须删除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
#2
27
DEMO
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属性的更多信息
#3
3
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>