如何设置svg的高度和svg所在容器的高度

<style>
    .container {
        height: 400px;
    }
    .svg {
        height: 100%;
    }
</style>

<div class="container">
    <svg class="svg" viewBox="0 0 100 100">
        <!-- SVG图形内容 -->
    </svg>
</div>

<div id="container">
    <svg id="svg" viewBox="0 0 100 100">
        <!-- SVG图形内容 -->
    </svg>
</div>

<script>
    var container = document.getElementById("container");
    var svg = document.getElementById("svg");
    
    // 设置SVG的高度
    svg.setAttribute("height", container.offsetHeight + "px");
    
    // 设置容器的高度
    container.style.height = svg.offsetHeight + "px";
</script>

<style>
    .svg {
        width: 100%;
        height: auto;
    }
    
    @media (max-width: 768px) {
        .svg {
            width: 50%;
        }
    }
</style>

<svg class="svg" viewBox="0 0 100 100">
    <!-- SVG图形内容 -->
</svg>