Flex Box 中的 SVG 在 Chrome 中消失答案

【问题标题】：SVG in Flex Box Disappears in ChromeFlex Box 中的 SVG 在 Chrome 中消失
【发布时间】：2021-01-23 03:01:25
【问题描述】：

我在 flex 框中使用 svg 将 div 中的字母居中。字母应该有一个最大尺寸，但如果 div 太小，则应该自行缩小。（我无法控制 div 的大小。）

但是，由于某种原因，它在 Firefox 中可以正常工作，但该元素在 Chrome(ium) 中完全消失了。我不知道这个错误是我的，还是在 Firefox 或 Chrome 中。有什么想法吗？

这是完整的文件：

<html><body>
    <div style="width:20%; height:300px; background-color:#cfc; border: solid 1px black; display:flex; justify-content:center; align-items:center;">
        <svg style="display:block; font-family:sans; background-color:#ffc; max-width:200px;" viewBox="0 0 10 10">
            <text style="font-size:10px;" x="50%" y="60%" dominant-baseline="middle" text-anchor="middle">X</text>
        </svg>
    </div>
</body></html>

【问题讨论】：

标签： html css google-chrome firefox svg

【解决方案1】：

没关系——在 SVG 中添加一个“width:100%”来修复它。尽管如此，Firefox 和 Chrome 之间还是有一个奇怪的区别，我肯定会引起其他人的头疼。

【讨论】：

【解决方案2】：

将max-width 更改为width

<div style="width:20%; height:300px; background-color:#cfc; border: solid 1px black; display:flex; justify-content:center; align-items:center;">
        <svg style="display:block; font-family:sans; background-color:#ffc; width:200px;" viewBox="0 0 10 10">
            <text style="font-size:10px;" x="50%" y="60%" dominant-baseline="middle" text-anchor="middle">X</text>
        </svg>
    </div>

https://jsfiddle.net/lalji1051/dc9uyt12/5/

【讨论】：

这行得通，但它删除了所需的最大宽度。不过，谢谢。