DIV 无法识别内部 SVG

Question

为什么 <div> 在以下情况下不会自动扩展到内部 <svg> 的高度？

CSS

    #curve-svg {
  height: auto;
  max-width: 400px;
  position: relative;
  border: 1px solid red;


  svg {
    position: absolute;
    width: 100%;
    max-width: 400px;
    height: auto;
  }
}

HTML

<div class="pure-u-1" id="curve-svg">
  <svg id="svg" width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.41421;">

    <path id="curve" style="fill:none;stroke-width:0.35px;stroke:#333;" d="blah" blah blah/>
  </svg>
</div>

我是使用 PURE.css，如果这有什么不同的话，但我还没有在 PURE.css 中找到任何可以阻止 div的展开高度；这也是 Bootstrap 3 和 Bootstrap 4 上的一个问题。

非常感谢任何帮助或建议！

Answer 1

造成这种情况的原因是 svg 元素的 height="100%" 属性。给它一个特定的高度（例如以像素为单位）。然后它将正确调整大小。 Here's an example.

DIV 无法识别内部 SVG

DIV doesn't recognize inner SVG

html

css

sag