Flex布局中SVG尺寸异常：设置宽高无效且溢出容器

在div容器内的SVG元素始终与所在div尺寸一致，无法按设置的30×30px显示。尝试过Flex布局下通过CSS或SVG自身属性指定宽高均未生效；后续测试发现问题与Flex布局无关，调整width、height、viewBox属性后SVG尺寸仍无变化，最终SVG溢出所在的70×100px容器。

原始代码 #

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;}

问题根源及修复方案 #

• SVG属性语法错误：

  1. 宽高属性使用了冒号:而非等号=，HTML属性赋值必须用等号，正确写法为width="30px"、height="30px"
  2. viewBox属性重复声明且大小写错误：SVG的viewBox属性大小写敏感，原始代码中错误写为viewbox=viewBox="0 0 30 30"，重复声明导致属性无效，应修正为单一的viewBox="0 0 30 30"

• 修复后的SVG标签：

<svg class="test" width="30px" height="30px" viewBox="0 0 30 30"> 
</svg>

修正后，SVG将按设置的30×30px尺寸显示，不会再溢出容器。

内容的提问来源于stack exchange，提问作者Janet