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。

可伸缩的圆形svg面具

1 个答案: