我创建了一个剪辑路径，可在页面中的多个 div 上重复使用。我使用属性 ClipPathUnits="objectBoundingBox" 使其根据其位置应用于每个 div。它在 Chrome 和 Firefox 中运行良好。当我在 safari 中尝试它时，它仅基于第一个 div 起作用。这意味着它第一次运行得很好，而不是当我再次调用它时，boudingbox 仍然基于第一个 Div。当我给第二个 div 提供负边距直到它与第一个部分重叠然后我可以看到它时，我意识到了这一点。
以下是该问题的示例：
.bar {
height: 100px;
width: 100px;
}
.block {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: white;
z-index: 100;
display: block;
clip-path: url(#clipping);
-webkit-clip-path: url(#clipping);
}<svg style="background: blue; height: 0px; overflow: hidden;">
<defs>
<clipPath id="clipping" clipPathUnits="objectBoundingBox">
<path fill="#FFFFFF" d="M0.501,0.971c-0.014,0-0.027-0.003-0.04-0.011l-0.34-0.194c-0.024-0.014-0.04-0.041-0.04-0.069L0.081,0.306
c0-0.028,0.015-0.055,0.04-0.069L0.458,0.04c0.013-0.007,0.026-0.011,0.04-0.011s0.027,0.003,0.04,0.011l0.339,0.194
c0.025,0.014,0.041,0.041,0.041,0.069l0.001,0.391c0,0.028-0.015,0.055-0.04,0.069L0.542,0.96C0.529,0.968,0.515,0.971,0.501,0.971z
" />
</clipPath>
</defs>
</svg>
<div class="bar" style="background: blue;">
<div class="block">
</div>
</div>
<div class="bar" style="background: green;"> …