如何解决SVG悬停填充动画播放时底部出现细线闪烁的问题

问题原因 #

你遇到的无法被截图捕捉的底部闪烁细线，是浏览器GPU加速渲染transform动画时的亚像素间隙问题：动画运行过程中矩形的移动坐标出现半像素偏移，遮罩边缘、矩形移动边缘、心形轮廓边缘三者之间出现极小的透明缝隙，漏出黑色背景，属于渲染帧之间的瞬时误差，因此无法通过截图捕获。

修复方案 #

以下三个方案可叠加使用，实测可完全消除闪烁问题：

• 修正矩形初始位移与尺寸，消除底部间隙
  给矩形初始位置多偏移1px，同时稍微加高矩形高度，确保动画全程底部不会出现空隙，修改对应CSS规则：

  rect {
    transform: translateY(calc(100% + 1px));
    height: 101%;
    fill: yellow;
    transition: transform 8s ease-in-out;
    will-change: transform;
  }
  

• 强制SVG高精度渲染，减少亚像素误差
  给SVG元素添加渲染精度规则，避免浏览器自动优化导致的几何计算偏差：

  svg {
    width: 300px;
    shape-rendering: geometricPrecision;
  }
  

• 加厚轮廓描边盖住潜在缝隙
  若仍有残留闪烁，可稍微加厚心形轮廓的描边宽度，直接覆盖可能出现的半像素间隙，不会影响整体视觉效果：

  svg path {
    stroke: yellow;
    stroke-width: 1.5px;
  }
  

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