文本

Question

尽管在SO上阅读了类似的问题，但我似乎无法解决这个问题。我想我的传奇和sublegend（所以文本中的两个tspans）在x属性上对齐（所以Austin和Detail sublegend应该从相同的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之间的空白混乱了......我没有。我真的很想理解为什么为两个tspans设置dx =“0”都不起作用。

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;