节点红色在图像上定位SVG元素

Question

我想在节点红色仪表板中显示图像，并在特殊条件下为某个区域着色。 为此，我创建了svg矩形，并希望将它们放在图像上，如此堆栈溢出帖子所述：Position SVG elements over an image

不幸的是，矩形始终显示在图像下方。有谁知道如何在图像上放置svg重叠？或者是否有更容易的解决方案为该区域着色？

.bild{
    position: absolut;
    top: 0;
    left: 0;
    z-index: 1;
}

.form{
    position: absolut;
    top: 0;
    left: 0;
    z-index: 2;
}

<img class="bild" src="image.png"/>


<svg class="form">
    <rect class="g1"  width="150" height="150" fill={{msg.gb1}} opacity="0.1" />
    <rect class="g2"  width="150" height="100" fill={{msg.gb2}} opacity="0.1"/>
    <rect class="g3"  width="150" height="100" fill={{msg.gb3}} opacity="0.1"/>
</svg>