如何根据视口缩放svg

Question

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

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

我知道使用CSS我可以使用此示例div：

<div class="test_div"></div>

并使用此CSS：

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

有效地使test_div保持与视口高度变化相同的比例。有没有办法用某种可扩展的大小单位替换SVG属性值？即。

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

我之前从未使用过StackOverflow，所以如果我太模糊，请帮帮我吧 - 谢谢！

Answer 1

不使用像素值，而是根据ATSC HD标准16：9宽高比使用圆形大小的百分比值。测量的像素已过时。