使用Javascript在较小屏幕上调整SVG大小

我正试图弄清楚如何使用JavaScript调整PreserveSpectratio的大小，我有一种艺术，它使用“0 0 750 500”的视图框占据了我屏幕的70%我试图在所有屏幕上更改此值以响应，但我失败了在桌面屏幕上修复它的唯一方法是使用PreserveSpectratio=“none”，但当我缩放屏幕时，它会缩小成一种丑陋的艺术，我试图实现的是如何在较小的屏幕上调整SVG的大小，而SVG保留了Aspectratio=“none”

像这样的svg：

<svg id="circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 432.53 432.53" preserveAspectRatio="none">
  <defs>
    <linearGradient id="linear-gradient" y1="216.27" x2="432.53" y2="216.27" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#20c5e0"/>
      <stop offset="1" stop-color="#1be28c"/>
    </linearGradient>
  </defs>
  <circle cx="216.27" cy="216.27" r="213.27" fill="none" stroke-miterlimit="10" stroke-width="6" stroke="url(#linear-gradient)"/>
</svg>

---

这不是Js应该做的事情。您需要将SVG放在一个div中，并在CSS中控制该div的维度

<div class="svg-container">
  <svg>...
</div>

---

您可以在svg代码中添加宽度和高度属性。或者你也可以使用css

---

将SVG包装在父容器中，并以相对单位为其指定宽度和高度

preserveAspectRatio=“none”

需要删除，以便图像按比例调整大小

默认情况下，在SVG中保留aspectratio=“xMidyMid-meet”

.container{
宽度：30vw；
高度：30vh；
}

请给我们看一些代码。。。或者您可以简单地为svg代码指定宽度和高度。添加了一个圆形svg作为示例。它的缩放非常完美，但其高度有问题，我是否可以使用javascript控制svg？

.svg-container {
  width: 70%;
}

svg {
  width: 100%;
  height: auto;
}