Question

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

当前，我有以下工作示例代码，只要该段落大于150px，它就可以工作。一旦段落的高度减小，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

代替

Answer 1

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

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

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

要解决此问题，除了给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>

Answer 2

相应地设置您的viewBox，我不知道您的SVG的userSpaceOnUse（最小x最小y宽度高度），例如viewBox="0 0 100 100"。
< / li>
删除width和height属性。
将样式属性设置为100％宽度和100％高度。
通过设置xMidYMid

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%;">

高度为100％的SVG永远不会缩小到150px以下

2 个答案: