父元素中的SVG与Angular Templates中的子元素中的SVG重叠

Question

我正在尝试在角模板中使用SVG。然而路由器插座的父元素有一个SVG作为背景图像。出于某种原因，背景图像与子元素中的SVG重叠。我已经包含了DOM树的截图。您可以看到保存SVG的两个对象元素。

接下来是在子元素SVG的屏幕截图当不加入母体SVG：

在父元素添加SVG对象之后它重叠子SVG：

我承担了SVG的WO按照放置到DOM中的顺序渲染，这对我来说很有意义。我想我错过了一些东西。有谁知道为什么会发生这种情况？

Answer 1

尝试：

.landing-page-hero { 
    position: relative; 
    z-index: -1; 
}