Html 让SVG充当块元素

我一直在想如何让SVG元素充当display:block。我想在SVG的正下方有一个图像，但它始终与SVG重叠。我尝试将属性更改为“display:block”，并围绕SVG元素本身创建一个div容器，但似乎没有任何效果。我相信有一个简单的方法，我就是想不出来

#svg{
位置：绝对位置；
左：0；
右：0；
保证金：自动；
z指数：-1；
显示：块；
边缘底部：10px；
显示：块；
}
#SVG容器{
显示：块；
宽度：90%；
保证金：自动；
}
#季节图像{
背景图片：url（'images/summer.png'）；
宽度：120%；
左边距：-30px；
高度：自动；
背景重复：无重复；
背景尺寸：包含；
高度：200px；
显示：块；
位置：相对位置；
}

{{currentTemp}}°；

您的CSS将

位置：绝对
设置为
svg
元素。与静态定位的图元不同，绝对定位的图元不会占用其容器中所需的空间。浏览器将它们放置在您使用
顶部
、
左侧
、
右侧
和
底部
指定的坐标处，无论该坐标位于任何其他元素的下方还是上方

从您的
#seasureimage
元素的角度来看，没有任何东西占据了它上面的空间。因此，浏览器将其放置在容器顶部，与绝对定位的SVG重叠

如果我们注释掉或删除
位置：绝对（及其相关属性），浏览器将把图像直接放在SVG下面


#svg{
/*位置：绝对位置；
左：0；
右：0*/
保证金：自动；
/*z指数：-1*/
显示：块；
边缘底部：10px；
显示：块；
}
#SVG容器{
显示：块；
宽度：90%；
保证金：自动；
}
#季节图像{
背景图像：url（'https://cataas.com/cat?26');
宽度：120%；
左边距：-30px；
高度：自动；
背景重复：无重复；
背景尺寸：包含；
高度：200px；
显示：块；
位置：相对位置；
}

{{currentTemp}}°；
移除
位置：绝对