Css 高度为100%的SVG永远不会收缩到150px以下

我正在尝试创建一个SVG，它可以（在高度上）延伸到一个段落，旁边的段落高度可变

目前，我有下面的工作示例代码，如果段落大于150px，那么它的工作时间就相当于150px。一旦段落的高度降低，SVG就停止收缩

本段为300px，svg将相应拉伸





本段为50px，svg不会收缩到150px以下

SVG与其他替换元件一样，默认大小为300x150。如果他们没有足够的信息来计算他们的宽度或高度，他们将报告他们的默认宽度（300）或高度（150）

对于第一个示例div，当浏览器试图计算其高度时，它会询问第一个孩子其高度是多少。它将报告默认值150px（来自SVG）。第二个孩子将报告300px。因此浏览器会将第一个div设置为300px。这是它的两个孩子中较大的一个

在第二个div中，将遵循相同的过程。这一次，最大高度将是SVG的默认高度（150px），因为它比另一个子级（50px）大。因此，该部分将在150px的高度结束

要解决这个问题，除了给SVG指定一个特定的高度，而不是使用一个百分比之外，您别无选择

<svg style="width: 40px; height:50px">

演示：

本段为300px，svg将相应拉伸





本段为50px，svg不会收缩到150px以下

• 相应地设置您的

  viewBox

  ，我不知道SVG的

  userSpaceOnUse

  （最小x最小y宽度高度），比如

  viewBox=“0 100”

• 删除

  宽度

  和

  高度

  属性

• 将“样式”属性设置为100%宽度和100%高度

• 通过设置

  preserveAspectRatio=“none”

生成的svg应如下所示：

<svg preserveAspectRatio="none" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:100%;height:100%;">

您是否尝试添加viewBox？是的，我尝试添加了

viewBox=“0 0 40 100%”

但没有帮助100%是个问题，但我不知道确切地说我知道这一点。但这是我知道如何使SVG响应（不使用任何javascript）的唯一方法，在viewBox中百分比无效