当我在浏览器中运行以下代码时:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
svg {
border:1px solid green;
width:200px !important;
height:200px;
}
#container {
position:fixed;
top:300px;
left:800px;
width:1px;
height:1px;
overflow:visible;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-content:center;
}
</style>
</head>
<body>
<div id="container">
<svg class="e3" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50"/>
</svg>
</div>
</body>
</html>
我得到的只是浏览器中的 2 像素垂直线。我的 SVG 的宽度似乎是 0(不包括绿色边框)。当我删除 css 规则时
display:flex ，然后我的 SVG 圆圈出现。我试图强制我的 SVG 有一个 width: 200px !important;但这条规则似乎没有生效。当我使用
display:flex 时，为什么我的 SVG 不遵守 200px 规则在容器上？
最佳答案
我相信您的 SVG 节点没有像您预期的那样显示，因为它的默认位置是 static .如果将 SVG 节点更改为 absolute你会得到想要的行为。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
svg {
position: absolute;
border: 1px solid green;
width: 200px;
height: 200px;
}
#container {
position: fixed;
/* changed these for ease of viewing */
top: 30px;
left: 150px;
width: 1px;
height: 1px;
overflow: visible;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="container">
<svg class="e3" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50"/>
</svg>
</div>
</body>
</html>关于svg - 如果容器为 display flex，为什么 SVG 宽度为 0？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58792503/