响应式剪辑路径 SVG
Responsive clip-path SVG
我正在尝试使用 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"
,圆的大小将不固定。
那我该怎么办?
您可以使用 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>
我正在尝试使用 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"
,圆的大小将不固定。
那我该怎么办?
您可以使用 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>