Как масштабировать SVG текст в зависимости от размера контейнера?
Как масштабировать svg текст в контейнере так что бы межбуквенное расстояние не изменялось, а изменялся размер текста? Простыми словами, чтобы шрифт и расположение текста оставались в неизменном виде. И размер подстраивался по ширине контейнера.
.text {
text-align: center;
width: 320px;
margin: 0 auto;
color: #fff;
font-size: 10vw;
font-family: sans-serif;
svg {
width: 100%;
height: 100%
}
}
text {
font-family: sans-serif;
font-weight: 900;
color: #fff;
}<div class="text">
<svg>
<text x="0" y="50" textLength="320" class="a">Hello</text>
<text x="0" y="100%" font-size="100%" textLength="320" fill = " red " class="b">WORLD</text>
</svg>
</div>