0

SOで同様の問題を読んでも、この問題を解決できないようです。凡例とサブ凡例 (テキスト内の 2 つの tspan) を x 属性に合わせたいと思います (したがって、オースティンと詳細のサブ凡例は同じ 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 間の空白が物事を台無しにすることを読みました...私は何も持っていません。両方の tspan に dx="0" を設定しても機能しない理由を本当に理解したいと思います。

4

1 に答える 1

0

それが必要な場合は、同じ x 位置になるように設定してください。フォント サイズが異なるため、見栄えがよくありません。それに対処するために、デルタボッジ係数を追加することもできます。

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

于 2016-01-10T22:04:25.847 に答える