css - SVG 在 Safari 中的高度不正确

Question

内联 SVG 似乎并不总是尊重 <svg> 上设置的基于百分比的大小Safari 中的元素。

HTML:

<div class="container">
  <svg viewBox="0 0 100 100">
    <rect x="0" y="0" width="100" height="100" />
  </svg>
</div>

CSS:

* {
  box-sizing: border-box;
}

.container {
  width: 200px;
  height: 200px;
  padding: 80px;
  background-color: #fcc;
}

svg {
  display: block;
  fill: black;
  width: 100%;
  height: 100%;
}

你可以在 CodePen 上看到它:https://codepen.io/pavelp/pen/EEOjNQ

Chrome 输出:



Safari 输出:



有一些方法可以修复它，例如，使用 <svg> 的像素大小。元素而不是百分比 - 但假设我需要百分比。

也可以通过包裹<svg>来固定带有无样式 <div> :https://codepen.io/pavelp/pen/bvQVER

问题:

是什么导致了这个问题？它是 Safari 错误(如果是，有人知道他们的错误跟踪器中是否有条目？)还是规范中的灰色区域？

为什么额外的包装器可以解决这个问题？

有更清洁的解决方案吗？

Answer 1

也遇到了这个。

What is causing the issue? Is it a Safari bug (if so, does anyone know if there's an entry in their bugtracker?) or is it a gray area in the spec?

似乎与:https://bugs.webkit.org/show_bug.cgi?id=154049有关.

Why does the extra wrapper fix the issue?

实际上，单独使用包装器并不能解决问题，将包装器的高度设置为 100% 确实如此。
这可能是因为该错误与 SVG 元素有关，DIV 元素的行为符合预期。

Is there a cleaner solution?

我的解决方法是将填充添加到 SVG 而不是父级。
不确定它是否更干净，但交换一行 CSS 比将所有受影响的元素包装在 DIV 中更容易