Как разместить многострочный текст по центру SVG

Question

Никак не могу разобраться как поместить текст поцентру в несколько лементов.

<svg width="247" height="160" viewBox="0 0 247 160" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g>  
    <rect width="57" height="62" fill="#D9D9D9"/>
    <text>
      <tspan> 1 </tspan>
      <tspan> 2 </tspan>
    </text>
  </g>
  <g>
    <rect x="76" width="82" height="62" fill="#D9D9D9"/>
    <text >
      <tspan> 3 </tspan>
      <tspan> 4 </tspan>
    </text> 
  </g>
  <g>
    <rect x="185" width="62" height="160" fill="#D9D9D9"/>
    <text >
      <tspan> 5 </tspan>
      <tspan> 6 </tspan>
    </text> 
  </g>
  <g>
    <rect y="80" width="158" height="80" fill="#D9D9D9"/>
    <text >
      <tspan> 7 </tspan>
      <tspan> 8 </tspan>
    </text> 
  </g>
</svg>

Answer 1

подобрать координаты, к сожалению это не адаптивная вещь для контента (пример показан для первой фигуры, по аналогии делается для остальных)

text {
fill:#AA0000;
text-anchor:middle;
}

<svg width="247" height="160" viewBox="0 0 247 160" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g>  
    <rect width="57" height="62" fill="#D9D9D9"/>
    <text x="27" y="34">
      <tspan> 1 </tspan>
      <tspan> 2 </tspan>
    </text>
  </g>
  <g>
    <rect x="76" width="82" height="62" fill="#D9D9D9"/>
    <text >
      <tspan> 3 </tspan>
      <tspan> 4 </tspan>
    </text> 
  </g>
  <g>
    <rect x="185" width="62" height="160" fill="#D9D9D9"/>
    <text >
      <tspan> 5 </tspan>
      <tspan> 6 </tspan>
    </text> 
  </g>
  <g>
    <rect y="80" width="158" height="80" fill="#D9D9D9"/>
    <text >
      <tspan> 7 </tspan>
      <tspan> 8 </tspan>
    </text> 
  </g>
</svg>

еще можно выравнивать через атрибут x="50%" y="50%" dominant-baseline="central " но это внутри одной svg

БЛОГ НА HUSL

Как разместить многострочный текст по центру SVG

Ответы (1 шт):