html - 如何缩放 SVG 以根据屏幕尺寸进行调整？

Question

我对编码世界很陌生。我正在尝试缩放我的 svg rect 以根据屏幕尺寸的变化进行调整。我已经对这个问题进行了一些搜索，并且看到了有关将高度和宽度设置为 100% 的建议，但是当我这样做时，我的 svg 要么消失到只有一半适合。这是我的代码9；当屏幕尺寸变小到一定程度时，按钮将垂直堆叠，但 svg 根本没有变化。请帮忙！先感谢您。

.button {
  margin-left:750px;
  margin-top:-590px;
  padding: 0px 30px;
  position:fixed;
  index:0;
}

<svg id="Profile" width="1200" height="700"> 
  <rect x="150" y="150" rx="10" ry="10" width="1000" height="550"
  style="fill:white;stroke:#05aa12;stroke-width:3"/>
</svg>

<div class="button"> 
  <button id="One" type="button" class="btn btn-secondary">One</button>

  <button id="Two" type="button" class="btn btn-secondary">Two</button>

  <button id="Three" type="button" class="btn btn-secondary">Three</button>
</div>

标签： htmlcsssvg