JS/CSS Clip Path - 如何计算圆的半径？

Question

我正在尝试动态设置 clip-path: circle(radius) 的半径，以便它适合它所在的任何大小的容器（周围有一些额外的 space）。例如，如果容器是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>

您还可以添加动画：

.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>

JS/CSS Clip Path - 如何计算圆的半径？

JS/CSS Clip Path - How to calculate radius for circle?

javascript

css

geometry

clip-path