即使使用 webkit 前缀，剪辑路径也无法在 safari 上运行
所以基本上，我正在粘贴我的 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 上打开。您会意识到存在差异（查看图像的背景）。这让我相信clip-path即使使用webkit前缀也不能在 safari 上工作。
怎么了？有任何想法吗？我对此不太满意SVG，所以我可能会理解这一点，所以如果你能给我修复这个问题的代码，我将不胜感激。
收到一只叮咚1回答
-
三国纷争
我会在掩码内使用 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>
随时随地看视频慕课网APP
相关分类
JavaScript