所以基本上，我粘贴了我的 jsfiddle，以便您更容易弄清楚到底发生了什么。
https://jsfiddle.net/h608n5yj/2/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<style>
.avatar-small {
width: 75px;
height: 75px;
padding: 4px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
clip-path: url('#avatar-mask');
-webkit-clip-path: url('#avatar-mask')
}
.avatar {
background-image: linear-gradient(to right, #9f7d5a, #d4b380 17%, #eecf97 41%, #b89a6a 62%, #dabd85 83%, #d4b380 100%);
clip-path: url('#avatar-mask');
-webkit-clip-path: url('#avatar-mask');
}
</style>
<body>
<svg>
<defs>
<clipPath id="avatar-mask" clipPathUnits="objectBoundingBox">
<path d="M .5 0 C .1 0 0 .1 0 .5 0 .9 .1 1 .5 1 .9 1 1 .9 1 .5 1 .1 .9 0 .5 0 Z" />
</clipPath>
</defs>
</svg>
<div class="avatar avatar-small">
<img src="https://i.ibb.co/gycB3mQ/avatar.png">
</div>
</body>
</html>只需先在 Chrome 上打开此链接，然后在 Safari 上打开即可。您会意识到存在差异(查看图像的背景)。这让我相信，即使使用 webkit 前缀，clip-path 也无法在 safari 上工作。
怎么了？有任何想法吗？我对 SVG 不太满意，所以我可能会理解这一点，所以如果您能给我修复此问题的代码，我将不胜感激。
最佳答案
我会在蒙版内使用 SVG
.avatar-small {
width: 75px;
height: 75px;
padding: 4px;
}
.avatar-big {
width: 175px;
height: 175px;
padding: 10px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.avatar {
background-image: linear-gradient(to right, #9f7d5a, #d4b380 17%, #eecf97 41%, #b89a6a 62%, #dabd85 83%, #d4b380 100%);
}
.mask,
.mask > *{
-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1 1"> <path d="M .5 0 C .1 0 0 .1 0 .5 0 .9 .1 1 .5 1 .9 1 1 .9 1 .5 1 .1 .9 0 .5 0 Z" /></svg>');
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1 1"> <path d="M .5 0 C .1 0 0 .1 0 .5 0 .9 .1 1 .5 1 .9 1 1 .9 1 .5 1 .1 .9 0 .5 0 Z" /></svg>');
}<div class="avatar avatar-small mask">
<img src="https://i.ibb.co/gycB3mQ/avatar.png">
</div>
<div class="avatar avatar-big mask">
<img src="https://i.ibb.co/gycB3mQ/avatar.png">
</div>关于javascript - 即使使用 webkit 前缀，clip-path 也无法在 safari 上工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60815090/