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

我对Safari、SVG和flexbox有问题

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

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

*{
保证金：0；
填充：0；
溢出：隐藏；
}
身体{
高度：100vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
svg{
背景色：青色；
最大高度：100vh；
}

---

以下是基于javascript的解决方案：

const svg=document.querySelector（“svg”）；
常数wByH=16/9；
函数computeSVGDimen（）{
常量宽度=window.innerWidth；
const height=window.innerHeight；
恒流比=宽度/高度；
const computedWidth=高度*wByH；
常数计算高度=宽度*（1/wByH）；
if（电流比
*{
保证金：0；
填充：0；
溢出：隐藏；
}
身体{
高度：100vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
svg{
背景色：青色；
}
在.css文件中使用此选项

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

这里是一个普通的CSS示例

它是在现代样式技术中使用CSS函数
min（…）
和
var（…）
完成的。当对全尺寸视图屏幕进行样式设计时，可根据svg/图像的
纵横比
和实际
vW
和
vH
单位计算尺寸。现代定心也是通过使用flexbox来完成的

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

请检查示例：


*{
保证金：0；
填充：0；
溢出：隐藏；
}
身体{
高度：100vH；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
}
svg{
--方面：1.777；
宽度：最小值（100vW，（100vH*var（-aspectRatio））；
高度：最小（100vH，（100vW/var（--aspectRatio））；
背景色：青色；
}
尝试使用flex代替最大高度，例如
flex:0 100vh
可以重新编程，一个修复方法是将
高度
和
宽度
属性设置为
1920
和
1080
，然后通过CSS将其覆盖为
自动
@enxaneta，不。我正在失去水平响应能力，而且我在侧面得到了一些填充：@kaido SVG的宽度和高度属性？我相信@kaido的意思是按照他的建议设置宽度和高度。然后在CSS中将它们都设置为
100%
来覆盖它们。这相当于根本不设置它们。感谢您的努力！这确实是Safari的有效解决方案。然而，它需要一些JavaScript，这是一个令人沮丧的问题。如果没有CSS解决方案，我明天将接受/奖励。再次感谢您的调查！甚至我也尝试了很多使用CSS的方法，但是Safari处理一切的方式与其他浏览器不同。我花了很长时间为狩猎旅行修理一些小东西。我希望有人能提出一个纯CSS的解决方案，即使我更愿意这样做；添加代码似乎会让事情变得更糟：太棒了！甚至不需要供应商前缀。因此，您给出了一个显式计算的
宽度
和
高度
，这对Safari很好，而不是
最大高度
——这对Safari来说是有问题的……您是否了解为什么我的原始代码在Safari中失败了？无论如何，非常高兴有了CSS解决方案。不幸的是，我无法撤销或分割赏金。非常感谢。谢谢你的反馈。正如我所指出的：由于时间不够，赏金当然是可以的！但是选择答案的thx:-）