带有 em 的 SVG 高度没有响应

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

如果屏幕尺寸为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>

Answer 2

你可以用一个简单的渐变来做到这一点：

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>