SVG在Safari中的高度不正确

Question

嵌入式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>元素的像素大小而不是百分比-但可以说我需要百分比。

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

问题：

• 是什么原因引起的？是Safari的错误（如果是这样，有人知道他们的bugtracker中是否有条目吗？）还是规范中的灰色区域？

• 为什么要使用额外的包装器解决此问题？

• 是否有更清洁的解决方案？

Answer 1

也参加了。