响应式剪辑路径 SVG答案

【问题标题】：Responsive clip-path SVG响应式剪辑路径 SVG
【发布时间】：2020-08-22 12:07:49
【问题描述】：

我正在尝试使用 css 属性 clip-path 使用 SVG 屏蔽元素，就像这张图片一样。

期望top-left、top-right...处的圆圈是固定大小（如20px），但SVG的大小与容器相同。

如果容器的大小是固定的，那么clipPath就是

<clipPath
  d="M20 0
  A20 20 0 0 1 0 20
  V180
  A20 20 0 0 1 20 200
  H180
  A20 20 0 0 1 200 180
  V20
  A20 20 0 0 1 180 0
  Z" />

如果容器的大小为auto，并且clipPath 加上clipPathUnits="objectBoundingBox"，则圆的大小将不固定。

那我该怎么办？

【问题讨论】：

我猜你可以在每次调整容器大小时动态构建剪辑路径。
@RobertLongson 那样的话，我是不是必须像MutationObserver一样使用js api？
developer.mozilla.org/en-US/docs/Web/API/ResizeObserver 或许
定义路径时可以使用百分比吗？
@cloned 你可以，但它不能解决问题。

标签： html css svg clip-path

【解决方案1】：

您可以使用 CSS 构建它并为您的圈子保持相同的大小：

.box {
  width:200px;
  height:200px;
  margin:5px;
  background:url(https://i.picsum.photos/id/1074/800/800.jpg) center/cover;
  -webkit-mask:
    radial-gradient(circle 20px at top    left ,transparent 97%,#fff 100%) top    left,
    radial-gradient(circle 20px at top    right,transparent 97%,#fff 100%) top    right,
    radial-gradient(circle 20px at bottom left ,transparent 97%,#fff 100%) bottom left,
    radial-gradient(circle 20px at bottom right,transparent 97%,#fff 100%) bottom right;
  -webkit-mask-size:51% 51%;
  -webkit-mask-repeat:no-repeat;
  mask:
    radial-gradient(circle 20px at top    left ,transparent 97%,#fff 100%) top    left,
    radial-gradient(circle 20px at top    right,transparent 97%,#fff 100%) top    right,
    radial-gradient(circle 20px at bottom left ,transparent 97%,#fff 100%) bottom left,
    radial-gradient(circle 20px at bottom right,transparent 97%,#fff 100%) bottom right;
  mask-size:51% 51%;
  mask-repeat:no-repeat;
}

<div class="box">

</div>

<div class="box" style="width:400px;">

</div>

用一些 CSS 变量来轻松处理它：

.box {
  --r:20px; /*radius of the circle */
  
  width:200px;
  height:200px;
  margin:5px;
  background:url(https://i.picsum.photos/id/1074/800/800.jpg) center/cover;
  
  --g:transparent 97%,#fff 100%;
  -webkit-mask:
    radial-gradient(circle var(--r) at top    left ,var(--g)) top    left,
    radial-gradient(circle var(--r) at top    right,var(--g)) top    right,
    radial-gradient(circle var(--r) at bottom left ,var(--g)) bottom left,
    radial-gradient(circle var(--r) at bottom right,var(--g)) bottom right;
  -webkit-mask-size:51% 51%;
  -webkit-mask-repeat:no-repeat;
  mask:
    radial-gradient(circle var(--r) at top    left ,var(--g)) top    left,
    radial-gradient(circle var(--r) at top    right,var(--g)) top    right,
    radial-gradient(circle var(--r) at bottom left ,var(--g)) bottom left,
    radial-gradient(circle var(--r) at bottom right,var(--g)) bottom right;
  mask-size:51% 51%;
  mask-repeat:no-repeat;
}

<div class="box">

</div>

<div class="box" style="width:400px;--r:40px">

</div>

【讨论】：