svg - 文本内 tspan 的对齐方式

Question

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

https://jsfiddle.net/fef1xqdt/5/

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

我读到 tspans 之间的空格把事情搞砸了……我没有。我真的很想了解为什么将 dx="0" 用于两个 tspan 都不起作用。

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>