Html 调整容器大小的Svg

我试图了解更多关于svg的信息，但令人困惑的是，在缩放外部容器时，我无法将viewBox更改为命中容器。例如，我将div设置为宽度为100%高度为100vh的容器，如何缩放svg以命中容器的宽度和高度，如以下示例所示：

    <div class="container">
    <svg id="bg" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000"><defs><linearGradient id="linear-gradient" x1="1.5" y1="499.5" x2="999.5" y2="499.5" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#3fa9f5"/><stop offset="1" stop-color="blue"/>
</linearGradient></defs><rect x="1.5" y="0.5" width="998" height="998" fill="url(#linear-gradient)"/><path d="M999,1V998H2V1H999m1-1H1V999h999V0Z"/></svg>
    </div>

这是一个简单的例子，我想实现的是如何在更改svg容器大小时使其宽度和高度缩放

.container{
width:100%;
height:100vh}

.container svg{
width:100%
height:100%}