Html 如何基于视口缩放svg

所以我从一个基本的SVG圆圈开始，但我希望它能够根据视口大小进行缩放

<svg height="100" width="100">  <circle cx="10" cy="10" r="15" fill="black"></circle>  </svg>

为了有效地使test_div在视口高度更改时保持相同的比例。有没有办法用某种可缩放的大小单位替换SVG属性值？i、 e

<circle cx="10vh" cy="10vh" r="5vh" fill="black"></circle>

---

我以前从未使用过StackOverflow，所以如果我说得太含糊，请帮帮我，谢谢

不使用像素值，而是使用基于ATSC HD标准16:9纵横比的圆圈大小百分比值。测量用像素已过时。

问得好+1.我一直想知道如何根据浏览器大小放大svg图形（不管是什么）。还没有发现一个适用于所有人的。

.test_div {height:5vh; width: 5vh;}

<circle cx="10vh" cy="10vh" r="5vh" fill="black"></circle>