我正在尝试创建一个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文件的情况下执行此操作。
如果您有任何建议/答案,我希望能听到。
如果证明不可能,我想听听其他方法。
谢谢!
最佳答案
最简单的方法就是使用border-radius
。
.circlemask {
border-radius: 50%;
}
无需使用SVG。