高度为 100% 的 SVG 永远不会缩小到 150 像素以下答案

【问题标题】：SVG with height 100% will never shrink below 150px高度为 100% 的 SVG 永远不会缩小到 150 像素以下
【发布时间】：2019-01-09 22:31:34
【问题描述】：

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

目前我有以下工作示例代码，只要段落大于 150 像素，它就可以工作。一旦段落的高度变小，SVG 就会停止收缩。

<div style="display: flex">
  <div>
    <svg style="display:block;width: 40px;height:100%">
      <line x1="20" y1="0" x2="20" y2="100%" stroke-width="1" stroke="black"></line>
    </svg>
  </div>
  <div style="height: 300px;border:1px solid">
    This paragraph is 300px, the svg will stretch accordingly
  </div>
</div>

<br><br><br><br>

<div style="display: flex">
  <div>
    <svg style="width: 40px;height:100%">
      <line x1="20" y1="0" x2="20" y2="100%" stroke-width="1" stroke="black"></line>
    </svg>
  </div>
  <div style="height: 50px;border:1px solid">
    This paragraph is 50px, the svg will not shrink below 150px
  </div>
</div>

这不能用 javascript 解决，它应该是响应式的。 SVG 在实践中要复杂得多，不能用简单的border-left: 1px solid black 代替

【问题讨论】：

你尝试添加 viewBox 了吗？
是的，我尝试添加viewbox="0 0 40 100%"，但没有帮助
100% 是个问题，但我不太清楚
我知道这一点。但这是我知道如何使这个 SVG 响应的唯一方法（不使用任何 javascript）
百分比在视图框中无效

标签： css svg flexbox

【解决方案1】：

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

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

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

要解决此问题，除了为 SVG 指定特定高度而不是使用百分比之外，您别无选择。

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

演示：

<div style="display: flex">
  <div>
    <svg style="display:block;width: 40px;height:100%">
      <line x1="20" y1="0" x2="20" y2="100%" stroke-width="1" stroke="black"></line>
    </svg>
  </div>
  <div style="height: 300px;border:1px solid">
    This paragraph is 300px, the svg will stretch accordingly
  </div>
</div>

<br><br><br><br>

<div style="display: flex">
  <div>
    <svg style="width: 40px; height:50px">
      <line x1="20" y1="0" x2="20" y2="100%" stroke-width="1" stroke="black"></line>
    </svg>
  </div>
  <div style="height: 50px;border:1px solid">
    This paragraph is 50px, the svg will not shrink below 150px
  </div>
</div>

【讨论】：

【解决方案2】：

相应地设置你的viewBox，我不知道你的SVG的userSpaceOnUse（最小x最小y宽度高度），比如说viewBox="0 0 100 100"。
删除 width 和 height 属性。
将样式属性设置为 100% 宽度和 100% 高度。
通过设置preserveAspectRatio="none"覆盖默认的xMidYMid值

生成的 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%;">

【讨论】：