Safari 在使用 flexbox 居中时不显示 SVG

Question

我遇到了 Safari、SVG 和 flexbox 的问题

我们的目标是拥有一个响应式 SVG，保持纵横比 (16:9)。此外，SVG 应该始终位于屏幕的垂直和水平中心。以下代码适用于除 Safari 之外的所有浏览器...我尝试了不同的供应商前缀，但我不知道为什么 SVG 没有显示...有什么想法吗？

您可以在下面的代码 sn-p 中测试有缺陷的行为。 Safari 将显示一个空白页面。其他浏览器将显示一个 16:9、始终居中的蓝绿色矩形。

* {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

svg {
  background-color: teal;
  max-height: 100vh;
}

<svg viewBox="0 0 1920 1080">
</svg>

更新

只是一些澄清。根据视口的纵横比，SVG 位于水平中心或垂直中心。只有当屏幕纵横比正好为 16:9 时，它才会匹配 SVS 的 viewBox（请参阅viewBox="0 0 1920 1080"），并且它会显示没有任何边框（信箱）。这是我的目标，解决方案应该适用于所有浏览器——不管它是如何完成的。

Answer 1

这是一个普通的 CSS 示例 ...

它是使用 CSS 函数 min(...) 和 var(...) 以现代样式技术完成的。由于样式是针对全尺寸视图屏幕完成的，因此可以根据 svg/图像的aspect-ratio 和实际的vW 和vHunits 计算尺寸。现代居中也是使用flexbox 完成的。

它应该在所有现代浏览器中运行。

请查看示例：

* {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  height: 100vH;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

svg {
  --aspectRatio: 1.7777777;
  width: min(100vW, (100vH * var(--aspectRatio)));
  height: min(100vH, (100vW / var(--aspectRatio)));
  background-color: teal;
}

<svg viewBox="0 0 1920 1080"></svg>

Answer 2

这里是基于 javascript 的解决方案：

const svg = document.querySelector("svg");
const wByH = 16 / 9;

function computeSVGDimen() {
  const width = window.innerWidth;
  const height = window.innerHeight;

  const currentRatio = width / height;

  const computedWidth = height * wByH;
  const computedHeight = width * (1 / wByH);

  if (currentRatio < wByH) {
    svg.style.width = `${width}px`;
    svg.style.height = `${computedHeight}px`;
  } else {
    svg.style.width = `${computedWidth}px`;
    svg.style.height = `${height}px`;
  }
}

computeSVGDimen();
window.onresize = computeSVGDimen;

* {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

svg {
  background-color: teal;
}

<svg viewBox="0 0 1920 1080"></svg>

Answer 3

在 .css 文件中使用它

@supports (-webkit-touch-callout: none) {svg {background-color: teal;}}