可扩展的圆形 svg 蒙版

Question

我正在尝试创建一个 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>

代码中包含一个指向 circle.svg 文件的链接：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <mask id="c1" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
      <circle id="circle" cx="240" cy="135" r="135" fill="white"/>
    </mask>
  </defs>
  <use xlink:href="#circle"/>
</svg>

我想可能有一种方法可以在没有单独的 svg 文件的情况下做到这一点。

如果您有任何建议/答案，我很想听听。 如果这被证明是不可能的，我想听听任何其他方法。

谢谢！

Answer 1

最简单的方法就是使用border-radius。

.circlemask {
   border-radius: 50%;
} 

无需使用 SVG。