Flex Box 中的 SVG 在 Chrome 中消失

Question

我在弹性框内使用 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>

Answer 1

没关系——向 SVG 添加“width:100%”修复了它。尽管如此，Firefox 和 Chrome 之间还是有一个奇怪的区别，我相信这会让其他人头疼。

Answer 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/

Flex Box 中的 SVG 在 Chrome 中消失

SVG in Flex Box Disappears in Chrome

html

css

firefox

svg

google-chrome