文本内 tspan 的对齐

Question

尽管在 SO 上阅读了类似的问题，但我似乎无法解决这个问题。我希望我的图例和子图例（因此文本中的两个 tspans）在 x 属性上对齐（因此 Austin 和 Detail 子图例应该从相同的 x 位置开始：

<svg width=500 height=500>
<g  class="legend" transform="translate(50,30)" data-style-padding="10" style="font-size: 20px;"> 
<rect class="legend-box" x="-18" y="-28" height="152" width="175.828125"></rect>
<g>
<text y="0em" x="1em" >
<tspan dx="0" text-anchor="start">Austin</tspan><tspan dx="0" dy="20" text-anchor="start" style="font-size: 16px;">Detail Sublegend</tspan></text>
<text y="2em" x="1em">New York</text>
<text y="4em" x="1em">San Francisco</text>
<circle cy="-0.25em" cx="0" r="0.4em" style="fill: rgb(44, 160, 44);"></circle>
<circle cy="1.75em" cx="0" r="0.4em" style="fill: rgb(31, 119, 180);"></circle>
<circle cy="3.75em" cx="0" r="0.4em" style="fill: rgb(255, 127, 14);"></circle></g>
</g>
</svg>

我读到 tspan 之间的空格会把事情搞砸...我没有。我真的很想明白为什么为两个 tspans 都设置 dx="0" 不起作用。

Answer 1

如果需要，只需将它们设置为具有相同的 x 位置即可。不同的字体大小意味着它看起来不太正确。也许你可以添加一些额外的 delta bodge 因子来应对这个问题。

.legend rect {
  fill:white;
  stroke:black;
  opacity:0.8;}

<svg width=500 height=500>
<g  class="legend" transform="translate(50,30)" data-style-padding="10" style="font-size: 20px;"> 
<rect class="legend-box" x="-18" y="-28" height="152" width="175.828125"></rect>
<g>
<text y="0em" x="1em" >
  <tspan dx="0" text-anchor="start">Austin</tspan><tspan x="1em" dy="20" text-anchor="start" style="font-size: 16px;">Detail Sublegend</tspan></text>
<text y="2em" x="1em">New York</text>
<text y="4em" x="1em">San Francisco</text>
<circle cy="-0.25em" cx="0" r="0.4em" style="fill: rgb(44, 160, 44);"></circle>
<circle cy="1.75em" cx="0" r="0.4em" style="fill: rgb(31, 119, 180);"></circle>
<circle cy="3.75em" cx="0" r="0.4em" style="fill: rgb(255, 127, 14);"></circle></g>
</g>
</svg>

文本内 tspan 的对齐

Alignment of tspans inside text

svg

position

tspan