JS/CSS 剪輯路徑 - 如何計算圓的半徑？

Question

我正在嘗試動態設置clip-path: circle(radius)的半徑，以便它適合它所在的任何大小的容器（周圍有一些額外的空間）。 例如，如果容器是 1000x500，那么整個圓應該是 500px 的 2/3。

我嘗試將半徑設置為一個簡單的百分比，例如 33%，這應該使整個圓變成 2/3，但根據容器的大小，它可能太大或太小。

查看基本形狀的文檔，半徑的百分比是從包含框的寬度和高度解決的， sqrt(width^2+height^2)/sqrt(2)但我不知道如何實際使用它來進行計算。

有人知道我能做什么嗎？ 我正在為這些值設置動畫，所以我確實需要通過clip-path來完成。

Answer 1

你可以用mask做同樣的事情而無需任何計算

 .box { display:inline-block; vertical-align:top; background:url(https://picsum.photos/id/1074/800/800) center/cover no-repeat; -webkit-mask:radial-gradient(circle closest-side,#fff 99%,transparent 100%); mask:radial-gradient(circle closest-side,#fff 99%,transparent 100%); }

 <div class="box" style="width:200px;height:100px"></div> <div class="box" style="width:100px;height:200px"></div> <div class="box" style="width:300px;height:300px"></div>

為了說明它是如何工作的：

 .box { display:inline-block; vertical-align:top; border:2px solid; background: radial-gradient(circle closest-side,transparent 99%,red 100%), url(https://picsum.photos/id/1074/800/800) center/cover no-repeat; }

 <div class="box" style="width:200px;height:100px"></div> <div class="box" style="width:100px;height:200px"></div> <div class="box" style="width:300px;height:300px"></div>

---

您還可以添加 animation：

 .box { display:inline-block; vertical-align:top; background:url(https://picsum.photos/id/1074/800/800) center/cover no-repeat; -webkit-mask:radial-gradient(circle closest-side,#fff 99%,transparent 100%) center/100% 100% no-repeat; mask:radial-gradient(circle closest-side,#fff 99%,transparent 100%) center/100% 100% no-repeat; transition:0.5s; }.box:hover { -webkit-mask-size:0% 0%; mask-size:0% 0%; }

 <div class="box" style="width:300px;height:300px"></div> <div class="box" style="width:200px;height:100px"></div>