SVG 在 Safari 中的高度不正确答案

【问题标题】：SVG has an incorrect height in SafariSVG 在 Safari 中的高度不正确
【发布时间】：2019-12-13 11:59:24
【问题描述】：

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

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> 元素的像素大小而不是百分比 - 但假设我需要百分比。

也可以通过用无样式的<div> 包裹<svg> 来修复它：https://codepen.io/pavelp/pen/bvQVER

问题：

是什么导致了这个问题？是 Safari 的错误（如果有，有人知道他们的错误跟踪器中是否有条目吗？）还是规范中的灰色区域？
为什么额外的包装器可以解决问题？
有更清洁的解决方案吗？

【问题讨论】：

标签： css svg safari

【解决方案1】：

也遇到了这个。

是什么导致了这个问题？是否是 Safari 错误（如果是，有谁知道如果他们的 bugtracker 中有一个条目？）或者它是规格？

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

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

实际上，仅包装器并不能解决问题，将包装器的高度设置为 100% 就可以了。这可能是因为该错误与 SVG 元素有关，DIV 元素的行为符合预期。

有更清洁的解决方案吗？

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

【讨论】：