另一个svg里面的svg不能用css改变高度

Question

实施例

在我发布的这个例子中，我有两个svg元素，每个元素都有一个带有自己视图框的嵌套元素。

svg {
  background-color: orange;
}

#inline {
  background-color: yellow;
}

#in-css {
  width: 50px;
}

<svg viewbox="0 0 300 300" width=100 height=100> 
  <rect x=50 y=30 width=100 height=100></rect>

  <svg id="inline" width="50px" viewbox="50 50 100 100">
    <rect width=50 height=50 x=80 y=80></rect>
  </svg>
</svg>
  

<svg viewbox="0 0 300 300" width=100 height=100> 
  <rect x=50 y=30 width=100 height=100></rect>
  <svg id="in-css" viewbox="50 50 100 100">
    <rect width=50 height=50 x=80 y=80></rect>
  </svg>
</svg>
  

问题

设置内部svg的宽度或高度属性，如果我内联，但如果我尝试使用css定位该元素，则无法设置它。有人知道为什么吗？如果有帮助，我使用chrome 作为参考：）