html - 可缩放圆形 svg 蒙版

Question

我正在尝试创建一个 css 类，它会屏蔽方形 div 或其他方形元素，以便您只能在 div 中看到具有给定内容的圆圈。我希望圆圈完全填满 div，以便四个边相切。唯一的诀窍是 div 或元素是方形的，因为元素需要保持可扩展性。例如:元素高度和宽度可能都是 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。