如何将svg放置在div内，而不考虑屏幕大小？

Question

嗨，我想将svg放在div内的同一位置，而不管屏幕尺寸如何。

我已经做了什么？将svg放在div内，非常适合较小的屏幕。但是，当我在较大的屏幕上查看该应用程序时，svg在div之外。下面是html和css代码。

<div id="root" class="active">
    <div class="wrapper">
        <div class="div_content">
            <svg width="30" height="30" class="svg_class1"></svg>
            Div content
        </div>
    </div>
</div>

#root {
    z-index: 100;
    position: fixed;
    left: 20px;
    top: 20px;
    width: calc(100% - 40px);
    bottom: 20px;
    overflow-y: auto;
    pointer-events: none;
    display: none;
 }

.active {
    display: block;
 }

.wrapper {
    width: 800px;
    margin-top: 100px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

.div_content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px;
}

.svg_class1 {
    position: absolute;
    right: 240px;
}

我尝试过的... 如下使用的单位“ vw”，

.svg_class1 {
     position: absolute;
     right: 20vw;
}

但是，svg在小屏幕和大屏幕中的位置不同。有人可以帮助我如何进行此操作。谢谢。