Как расположить большой текст в svg?

Question

Как сделать вот такую svg картинку с текстом адаптивную

    <svg width="391" height="134" viewBox="0 0 391 134" fill="none" xmlns="http://www.w3.org/2000/svg">
        <!-- Фигура -->  
        <path d="M0 10C0 4.47715 4.47715 0 10 0H231C236.523 0 241 4.47715 241 10V32.5C241 38.0228 245.477 42.5 251 42.5H381C386.523 42.5 391 46.9772 391 52.5V75.625V108.75V124C391 129.523 386.523 134 381 134H10C4.47716 134 0 129.523 0 124V10Z" fill="red" />
        <!-- Стилизация текста -->  
        <g fill="black" font-family="Inter-Regular" font-size="30" font-weight="900">
          <!-- Сам текст -->  
          <text x="6" y="42"> Центр региона </text>
        </g>
        <g fill="black" font-family="Inter-Regular" font-size="19" font-weight="400">
          <text x="376" y="69"  style="text-anchor: end;"> Спрятан от суеты, но В 20 минутах от столицы Краснодарского края, города Краснодар и аэропорта Пашковский.
        </text>    
        </g>
      </svg>

Answer 1

Используйте <tspan>

    <svg width="391" height="134" viewBox="0 0 391 134" fill="none" xmlns="http://www.w3.org/2000/svg">
        <!-- Фигура -->  
        <path d="M0 10C0 4.47715 4.47715 0 10 0H231C236.523 0 241 4.47715 241 10V32.5C241 38.0228 245.477 42.5 251 42.5H381C386.523 42.5 391 46.9772 391 52.5V75.625V108.75V124C391 129.523 386.523 134 381 134H10C4.47716 134 0 129.523 0 124V10Z" fill="red" />
        <!-- Стилизация текста -->  
        <g fill="black" font-family="Inter-Regular" font-size="30" font-weight="900">
          <!-- Сам текст -->  
          <text x="6" y="42"> Центр региона </text>
        </g>
        <g fill="black" font-family="Inter-Regular" font-size="19" font-weight="400">
          <text x="376" y="69" dy="0"  style="text-anchor: end;">
            <tspan x="320" dy=".6em">Спрятан от суеты, но В 20 минутах от</tspan>
            <tspan x="317" dy="1.2em">столицы Краснодарского края, города</tspan>
            <tspan x="305" dy="1.2em">Краснодар и аэропорта Пашковский.</tspan>
        </text>    
        </g>
      </svg>

А по поводу подгонки под экраны, то можете попробовать добавить допустим style

<svg width="391" height="134" viewBox="0 0 391 134" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 100%;">

или через CSS добавьте ширину SVG

БЛОГ НА HUSL

Как расположить большой текст в svg?

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