html - 带有 em 的 SVG 高度没有响应

Question

我需要根据 font-size 值制作响应式 line-height 和 background-image:

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。如您所见，我也设置了 svg background-image 的 height:height='1.93333333em'。我预计背景高度将是 58px，但实际上它是 30px 就像 1em = 16px。如果我为 background-image 设置 height='58px'，我会得到我想要的。

如果屏幕尺寸是 500px，那 line-height 会改变，但是 background-image 的 height不是。

em 如何在 SVG 中工作以及如何使 SVG 大小响应？

Answer 1

我会这样做:

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>