SVG: высота с em не отзывчива

Question

Мне нужно сделать отзывчивым line-height и background-image зависит от font-size значения:

p {
  font-size: 30px;
  line-height: 1.93333333em;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' height='1.93333333em' width='400' viewBox='0 0 400 5' preserveAspectRatio='xMinYMax' %3e%3cline x1='0' y1='0' x2='100%' y2='0' style='stroke:rgb(255,0,0);stroke-width:5' /%3e%3c/svg%3e");
}

@media screen and (max-width: 500px) {
  p {
    font-size: 15px;
  }
}

<p>Hi people!<br>How are you?<br>I`m good!</p>

В этой ситуации 1em = 30px, поэтому 1.933333em = 58px. Как видите, я установил height svg background-image: height='1.93333333em'. Я ожидал, что высота фона будет 58px, но на самом деле это 30px, как 1em = 16px. Если я установлю height='58px' для background-image, я получу то, что хочу.

А если размер экрана 500px, то line-height изменяется, но height из background-image нет.

Итак, мой вопрос: как работает em в svg и как сделать размер svg отзывчивым?

Заранее спасибо!

Answer 1

Вы можете сделать это с простым градиентом:

p {
  font-size: 30px;
  line-height: 1.93333333em;
  background-image:
    repeating-linear-gradient(to bottom,
      red 0,red 4px,
      transparent 4px,transparent 1.93333333em);
  padding-bottom:4px; /*to have a red line at the bottom also*/
}

@media screen and (max-width: 500px) {
  p {
    font-size: 15px;
  }
}

<p>Hi people!<br>How are you?<br>I`m good!</p>

Answer 2

Вот как бы я это сделал:

SVG не имеет ширины или высоты, но я определил viewBox='0 0 5 5'. Для размера вы можете использовать CSS background-size:1.93333333em; и позволить изображению повторяться по x и y.

p {
  font-size: 30px;
  padding:0;
  line-height: 1.93333333em;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' preserveAspectRatio='xMinYMax' %3e%3cline x1='0' y1='0' x2='100%' y2='0' style='stroke:rgb(255,0,0);' /%3e%3c/svg%3e");
  background-size:1.93333333em;
}

@media screen and (max-width: 500px) {
  p {
    font-size: 15px;
  }
}

<p>Hi people!<br>How are you?<br>I`m good!<br><br></p>

В качестве альтернативы вы можете использовать линейные градиенты CSS вместо SVG для фонового изображения.

p {
  font-size: 30px;
  padding:0;
  line-height: 1.93333333em;
  background-image: linear-gradient(transparent 0%, transparent 1.93333333em, red 1.93333333em, transparent 2em, transparent 3.93333333em, red 3.93333333em, transparent 4em, transparent 5.93333333em ,red 5.93333333em, transparent 6em);

}

@media screen and (max-width: 500px) {
  p {
    font-size: 15px;
  }
}

<p>Hi people!<br>How are you?<br>I`m good!<br><br></p>