如何根据视口缩放 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>

我以前从未使用过 Whosebug，所以如果我太含糊请帮帮我 -- 谢谢！

Answer 1

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