水平对齐嵌套的SVG

我希望两个嵌套的SVG水平对齐（并排）。但是，默认行为似乎是它们折叠和重叠，这样只有红色SVG和父SVG的其余部分可见

这可能吗？如果可能，如何实现

<svg width="80" height="40" style="background-color:skyblue">
  <svg width="40" height="40">
    <path d="M0,0 h40 v40 h-40 v-40 z" fill="green"/>
  </svg>
  <svg width="40" height="40">
    <path d="M0,0 h40 v40 h-40 v-40 z" fill="red"/>
  </svg>
</svg>

---

演示：

基于上述尺寸，我假设您希望两个方形SVG元素在父元素顶部水平对齐。在这里，x和y坐标被添加到子元素中，以便定位它们：

谢谢！您在父项上使用术语“顶上”。我会认为他们是父母的“内部”。你能评论一下区别吗？Ie：将嵌套SVG视为分层SVG比包含SVG更正确吗？