如何让SVG clip-path在真实iPhone XR设备上正常生效？

问题现象 #

使用SVG clip-path 实现图片裁剪时，在Android设备、Edge、Chrome模拟器中表现正常，但在iOS 16.4.1的真实iPhone XR设备Safari中，首次打开页面时图片未被裁剪，完整显示；切换到其他应用再返回Safari后，裁剪效果才正常出现。已添加 -webkit- 前缀，但问题依旧。

原代码如下：

CSS代码 #

.clip-svg {
  clip-path: url(#myClip);
  -webkit-clip-path: url(#myClip);
  animation: fadeInAnimation ease 3s;
  -webkit-animation: fadeInAnimation ease 3s;
}

#image-overlay {
  position: absolute;
}

#image {
  opacity: 0.035;
  -webkit-opacity: 0.035;
}

.container {
  position: relative;
}

#overlay {
  padding: 10px;
  inset: 0;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.4);
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
    -webkit-opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-opacity: 1;
  }
}

HTML代码 #

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="overlay.css">
</head>
<body>
  <div class="container">
    <img id="image-overlay" class="clip-svg" src="https://miro.medium.com/v2/resize:fit:1400/0*kAOAT0_uC42E9V5l" />
    <img src="https://miro.medium.com/v2/resize:fit:1400/0*kAOAT0_uC42E9V5l" id="image" />
  </div>

  <svg>
    <defs>
      <clipPath id="myClip" clipPathUnits="objectBoundingBox">
        <polygon points="0,0 .4,0 .4,.4 0,.4"/>
        <circle cx=".2" cy=".42" r=".04"/>
        <circle cx=".4" cy=".2" r=".04"/>
        <polygon points=".6,.6 1,.6 1,1 .6,1" />    
        <circle cx=".8" cy=".6" r=".04"/>
        <circle cx=".6" cy=".8" r=".04"/>
        <polygon points=".6,0 1,0 1,.4 .6,.4" />
        <circle cx=".6" cy=".2" r=".04"/>
        <circle cx=".8" cy=".4" r=".04"/>
        <polygon points="0,.6 .4,.6 .4,1 0,1"/>
        <circle cx=".2" cy=".6" r=".04"/>
        <circle cx=".4" cy=".8" r=".04"/>
      </clipPath>
    </defs>
  </svg>
</html>

解决方案 #

方法1：强制触发Safari重绘 #

Safari首次加载时可能未正确应用clip-path，通过修改元素样式触发重绘可解决问题：

在HTML的body末尾添加以下脚本：

document.addEventListener('DOMContentLoaded', function() {
  const clippedImage = document.getElementById('image-overlay');
  // 强制触发重绘
  clippedImage.style.display = 'none';
  clippedImage.offsetHeight; // 触发重排
  clippedImage.style.display = '';
});

方法2：将SVG内联到被裁剪元素的父容器 #

将SVG的defs部分内联到目标元素的父容器，确保clip-path定义在元素渲染前被加载：

修改HTML结构：

<div class="container">
  <svg style="display: none;">
    <defs>
      <clipPath id="myClip" clipPathUnits="objectBoundingBox">
        <polygon points="0,0 .4,0 .4,.4 0,.4"/>
        <circle cx=".2" cy=".42" r=".04"/>
        <circle cx=".4" cy=".2" r=".04"/>
        <polygon points=".6,.6 1,.6 1,1 .6,1" />    
        <circle cx=".8" cy=".6" r=".04"/>
        <circle cx=".6" cy=".8" r=".04"/>
        <polygon points=".6,0 1,0 1,.4 .6,.4" />
        <circle cx=".6" cy=".2" r=".04"/>
        <circle cx=".8" cy=".4" r=".04"/>
        <polygon points="0,.6 .4,.6 .4,1 0,1"/>
        <circle cx=".2" cy=".6" r=".04"/>
        <circle cx=".4" cy=".8" r=".04"/>
      </clipPath>
    </defs>
  </svg>
  <img id="image-overlay" class="clip-svg" src="https://miro.medium.com/v2/resize:fit:1400/0*kAOAT0_uC42E9V5l" />
  <img src="https://miro.medium.com/v2/resize:fit:1400/0*kAOAT0_uC42E9V5l" id="image" />
</div>

方法3：使用CSS clip-path替代SVG #

将SVG路径转换为CSS clip-path语法，避免SVG引用的兼容性问题：

修改.clip-svg的CSS：

.clip-svg {
  clip-path: polygon(0 0, 40% 0, 40% 40%, 0 40%), 
             circle(4% at 20% 42%), 
             circle(4% at 40% 20%),
             polygon(60% 60%, 100% 60%, 100% 100%, 60% 100%),
             circle(4% at 80% 60%),
             circle(4% at 60% 80%),
             polygon(60% 0, 100% 0, 100% 40%, 60% 40%),
             circle(4% at 60% 20%),
             circle(4% at 80% 40%),
             polygon(0 60%, 40% 60%, 40% 100%, 0 100%),
             circle(4% at 20% 60%),
             circle(4% at 40% 80%);
  -webkit-clip-path: polygon(0 0, 40% 0, 40% 40%, 0 40%), 
             circle(4% at 20% 42%), 
             circle(4% at 40% 20%),
             polygon(60% 60%, 100% 60%, 100% 100%, 60% 100%),
             circle(4% at 80% 60%),
             circle(4% at 60% 80%),
             polygon(60% 0, 100% 0, 100% 40%, 60% 40%),
             circle(4% at 60% 20%),
             circle(4% at 80% 40%),
             polygon(0 60%, 40% 60%, 40% 100%, 0 100%),
             circle(4% at 20% 60%),
             circle(4% at 40% 80%);
  animation: fadeInAnimation ease 3s;
  -webkit-animation: fadeInAnimation ease 3s;
}

原理说明 #

iOS 16.4.1的Safari首次渲染时，存在SVG资源解析与元素渲染的时序问题，导致clip-path未被正确应用。切换应用返回时，Safari重新渲染页面，此时clip-path已被解析完成，效果恢复正常。上述方法通过强制重绘、调整SVG位置或替换为CSS clip-path，解决了时序问题，确保页面加载时裁剪效果立即生效。

内容的提问来源于stack exchange，提问作者MMT