div 内的 SVG 框是它所在的 div 元素的宽度和高度，我不知道为什么。我正在使用弹性盒子。我正在使用 css 或直接指定所有元素的宽度和高度，这就是我发布此问题的原因，因为它不起作用。我正在尝试在一个 70 x 100 的 div 中使用 30 x 30 px svg，无论出于何种原因，它都会溢出并且更大。
html
<html>
<body>
<div class="wrapper">
<div class="div left-1" id="drawArea">
<svg class="test" width:"30px" height:"30px" viewbox=viewBox="0 0 30 30">
</svg>
</div>
<div class="div right-1">2</div>
<div class="div left-2" >3</div>
<div class="div right-2">4</div>
</div>
</body>
</html>
CSS
.wrapper {display: flex; flex-wrap: wrap; font-weight: bold; text-align: center; width:170px; height:200px}
.left-1 {flex-basis: 70px; background: yellow;}
.right-1 {flex-basis: 100px; background: deepskyblue;}
.left-2 {flex-basis: 70px; background: hotpink;}
.right-2 {flex-basis: 100px; background: BlueViolet;}
.test {background: black;}
另见代码笔。黑色 blox 是 svg 区域 https://codepen.io/sumo_suzy/pen/MWPJWmv
做了一些更多的测试后，我意识到这与我使用 flex box 无关，但是无论我输入什么宽度或高度，svg 区域的大小似乎都没有改变（我也尝试过使用 viewbox）
看这个codepen
你有
width:"30px"width="30"viewport如果你想使用 svg 你必须遵循 svg 规则...
看到你的片段之后。主要是“语法”问题
.wrapper {
display: flex;
flex-wrap: wrap;
font-weight: bold;
text-align: center;
width: 170px;
height: 200px
}
.left-1 {
flex-basis: 70px;
background: yellow;
}
.right-1 {
flex-basis: 100px;
background: deepskyblue;
}
.left-2 {
flex-basis: 70px;
background: hotpink;
}
.right-2 {
flex-basis: 100px;
background: BlueViolet;
}
.test {
background: black;
}<div class="wrapper">
<div class="div left-1" id="drawArea">
<svg class="test" style="width:30px;height:30px" viewBox="0 0 30 30"></svg>
</div>
<div class="div right-1">2</div>
<div class="div left-2">3</div>
<div class="div right-2">4</div>
</div>