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

这就是我要做的：

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>

SVG：与em的高度不响应

2 个答案: