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 {{3}} {{1}}包裹起来来修复它

问题：

导致问题的原因是什么？这是一个Safari漏洞（如果是这样，有人知道他们的bugtracker中是否有条目？）或者它是否是规范中的灰色区域？
为什么额外的包装器会解决问题？
有更清洁的解决方案吗？

Answer 1

也参加了。

是什么原因引起的问题？这是Safari的错误吗？如果他们的bugtracker中有条目？）还是它的灰色区域规格？

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

为什么多余的包装器可以解决此问题？

仅包装器确实不能解决问题，将包装器的高度设置为100％确实可以解决问题。大概是因为该错误与SVG元素有关，DIV元素的行为符合预期。

有更清洁的解决方案吗？

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

SVG在Safari中的高度不正确

1 个答案: