1

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

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

1 ответ 1

0

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

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

2
  • и если у меня таких элементов много? у кажлго подбор? и еще если не сложно текст должен быть на 2 строчках)
    – zxcqwe
    13 сен 2022 в 12:59
  • @zxcqwe посмотрите на тег svg "foreignObject" и так же как и в css работает text-align: center 14 сен 2022 в 6:52

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.