Svg 在文本内对齐tspans

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

AustinDetail次级性别
纽约
旧金山

---

我读到tspans之间的空格会把事情搞砸……我没有空格。我真的很想知道为什么要放dx=“0”因为两个TSPAN都不起作用。

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

.legend rect{
填充物：白色；
笔画：黑色；
不透明度：0.8；}

AustinDetail次级性别
纽约
旧金山

<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>