Как сделать высоту тега text равной высоте svg

Question

.card-header__title {
    width: 850px;
    height: 125px;
    margin: 0 auto 130px;
    font-size: 146px;
    display: block;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .05em;
}

<svg class="card-header__title sm-hidden" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <defs>
                <linearGradient id="textgradient" x1="0%" x2="0%" y1="0%" y2="100%">
                    <stop stop-color="#6dc1df" offset="0%"></stop>
                    <stop stop-color="#63b4dd" offset="20%"></stop>
                    <stop stop-color="#9fd5e7" offset="70%"></stop>
                    <stop stop-color="#E8F3F5" offset="100%"></stop>
                </linearGradient>
            </defs>
            <text x="0" y="120" fill="url(#textgradient)">Карта клиента</text>
        </svg>

Ссылка на код: jsfiddle.net/ye6ct5qz

код выше

Можно как нибудь регулировать высоту тега text?

Answer 1

Вам нужно не высоту шрифта менять, а описать в каком масштабе у Вас отображается SVG, для этого используется атрибут viewBox.

Допустим, шрифт у меня будет размером 10. 10 это относительная единица, пока мы не указали масштаб, мы точно не знаем сколько это. Поэтому укажем масштаб с помощью viewBox:

<svg class="card-header__title sm-hidden" viewBox="0 0 85 12.5 ">

viewBox содержит 4 цифры - Х Y координаты верхнего левого угла, ширину и высоту. С помощью этих цифр можно указать, какая именно часть SVG будет отображаться в SVG-контейнере. Я указал высоту шрифта 10, а высота viewBox 12.5 — высота шрифта чуть меньше высоты SVG

C учетом того, что вы указали размеры SVG:

.card-header__title {
    width: 850px;
    height: 125px;
    ...
}

Можно посчитать, что 1 единица SVG = 850px / 85 = 10px. Если вы уменьшите высоту SVG, допустим вдвое, то 1 единица SVG = 425px / 85 = 5px. Таким образом, при изменении размеров SVG-контейнера масштаб будет автоматически изменятся, и высота шрифта будет относительна высоте SVG

Кстати, по умолчанию, масштаб по X и Y сохраняется, те картинку нельзя сжать только по одной оси. Этим управляет атрибут preserveAspectRatio

Если что-то осталось непонятным изучайте:

Как взаимодействуют между собой viewport и viewBox

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

.card-header__title {
  width: 850px;
  height: 125px;
  margin: 0 auto 130px;
  display: block;
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .05em;
}

<svg class="card-header__title sm-hidden" height="125" viewBox="0 0 85 12.5">
            <defs>
                <linearGradient id="textgradient" x1="0%" x2="0%" y1="0%" y2="100%">
                    <stop stop-color="#6dc1df" offset="0%"></stop>
                    <stop stop-color="#63b4dd" offset="20%"></stop>
                    <stop stop-color="#9fd5e7" offset="70%"></stop>
                    <stop stop-color="#E8F3F5" offset="100%"></stop>
                </linearGradient>
            </defs>
            <text x="0" y="10" fill="url(#textgradient)"  font-size="10" >Карта клиента</text>
</svg>