Flex + svg 在 ios Safari 14.0.3 中表现奇怪

Question

所以我有这个简单的标记：

<div class="container">
  <svg>...</svg>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

在Chrome上，一切都按预期工作 - svg 以 .container 类为中心

在Safari 14.0.3上，浏览器不会渲染 svg，如果我打开检查器并切换属性显示：关闭 Flex然后再打开，它就会显示并按预期工作。

在这种情况下你会使用什么后备方案？

Answer 1

检查SVG参考 id 是否与其他 svgs id 冲突。当您使用相同的 id 来引用 svg 定义时，Safari 的行为会很奇怪。另一方面，Chrome 并不关心您是否在不同的 svgs 中使用相同的 id。