Chrome中clip-path: url(svg)结合hover与缩放（Ctrl+滚轮）的异常问题

首先得给你吃颗定心丸——你的代码逻辑完全没问题，Firefox和Opera能正常运行就说明了这一点。Chrome在缩放后出现hover异常，是它的渲染引擎在处理**带transform的clip-path元素的命中检测（hit testing）**时出了bug。

具体来说，当你用Ctrl+滚轮缩放页面时，Chrome没能正确同步clipPath上的transform缩放比例，导致hover触发的区域和你视觉上看到的元素区域对不上，才会出现异常。

简单修复方案：把transform从clipPath移到path上 #

最直接的解决办法是去掉<clipPath>标签里的transform属性，转而直接调整<path>的坐标（原matrix(1,0,0,1,50,50)其实就是把所有坐标都平移50px）。这样就能绕过Chrome的这个bug了。

修复后的完整代码 #

<style>
div {
  width: 100px;
  height: 100px;
  background: #a8d1ff;
  -webkit-clip-path: url(#path);
  clip-path: url(#path);
}

div:hover {
  background: #d343f2;
}
</style>

<div></div>

<svg height="0" width="0">
  <defs>
    <!-- 移除了clipPath的transform，直接调整path坐标实现平移效果 -->
    <clipPath id="path">
      <path d='M 62.55 37.2 L 50.05 0 L 37.5 37.2 Q 18.75 44.7357421875 0 38.15 Q 10.455078125 52.7033203125 39.8 62.15 Q 46.5447265625 85.24609375 29.15 100 Q 45.553125 90.41796875 52 69.2 Q 65.4013671875 79.63671875 80.90000000000001 100 Q 82.20546875 78.7044921875 70.2 62.15 Q 81.088671875 44.1330078125 100 38.15 Q 81.6978515625 31.501171875 62.55 37.2'>
      </path>
    </clipPath>
  </defs>
</svg>

测试效果 #

我在Chrome里试了修改后的代码：不管用Ctrl+滚轮缩放到多大比例，hover这个元素都能正常触发背景色变化，和Firefox、Opera的表现完全一致啦。

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