所以基本上，我正在粘貼我的 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，所以我可能會理解這一點，所以如果你能給我修復這個問題的代碼，我將不勝感激。
即使使用 webkit 前綴，剪輯路徑也無法在 safari 上運行
收到一只叮咚
2022-05-26 16:51:46
