Html 可缩放圆形svg掩码

我正在尝试创建一个css类，该类将屏蔽一个方形div或其他方形元素，以便您只能在div中看到一个包含给定内容的圆。我希望圆完全填充div，以便四边相切。诀窍是，唯一已知的是div或元素是正方形的，因为该元素需要保持可伸缩性。例如：元素高度和with可能都是50%，而不是50px。我还试图让div集中在页面上，这也很有挑战性

以下是我一直在研究的代码：

.circlemask{
 margin-left: auto;
 margin-right: auto;
 margin-top:auto;
 margin-bottom:auto;
 mask: url("img/circle.svg");
 -webkit-mask-box-image: url("img/circle.svg");
 -webkit-mask-size: 100% 100%;
} 

<div class="circlemask" height="70% width="70%"></div>

.circlemask{
左边距：自动；
右边距：自动；
页边顶部：自动；
页边距底部：自动；
掩码：url（“img/circle.svg”）；
-webkit掩码框图像：url（“img/circle.svg”）；
-webkit面罩尺寸：100%100%；
} 
最简单的方法就是使用
边界半径

.circlemask {
   border-radius: 50%;
} 

无需使用SVG。
您能解释一下为什么要使用掩码与剪辑路径，以及图像掩码与掩码元素吗？或者，仅仅使用边界半径裁剪成一个圆？不幸的是，掩码支持现在相当不一致。您应该能够使用
objectBoundingBox
单位创建缩放掩码（请参阅），但实际上，新的CSS掩码规范的实现非常混乱，甚至将掩码应用到SVG内容在跨浏览器时也变得不可靠。我对html/CSS一无所知。如果有什么办法可以用javascript或者其他的方法来实现这一点的话，我会非常乐意听到。你需要指定一个特定的大小，例如
width:400px；高度：400px以确保正方形。见：
.circlemask {
   border-radius: 50%;
}