Css SVG在Safari中的高度不正确

内联SVG似乎并不总是尊重Safari中

元素上设置的基于百分比的大小

HTML:

您可以在代码笔上看到它：

铬输出：

Safari输出：

有很多方法可以解决这个问题，例如，使用

元素的像素大小而不是百分比——但假设我需要百分比

它也可以通过使用非样式的

包装

来修复：

问题:

• 是什么导致了这个问题？这是一个Safari bug（如果是，有人知道他们的bugtracker中是否有条目吗？）还是规范中的灰色区域

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

• 有更清洁的解决方案吗

也遇到了这个问题
是什么导致了这个问题？这是一个狩猎虫（如果是，有人知道吗 如果他们的bugtracker中有一个条目？）或者它是数据库中的一个灰色区域 规格
似乎与：
为什么额外的包装可以解决这个问题
事实上，仅包装器并不能解决问题，将包装器的高度设置为100%确实解决了问题。 这很可能是因为bug与SVG元素有关，DIV元素的行为与预期一致
有更清洁的解决方案吗
我的解决方法是将填充添加到SVG中，而不是添加到父级。 不确定它是否更干净，但交换一行CSS比将所有受影响的元素包装在一个DIV中更容易

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

* {
  box-sizing: border-box;
}

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

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