使用transform: scale()实现SVG眼睛动画时路径模糊的问题咨询

看起来你碰到了Chrome在非整数页面缩放（比如90%）下，SVG路径变换时的模糊问题——这类问题通常和浏览器的亚像素渲染优化有关，尤其是在使用transform: scale()做动画的时候。你试过的translateZ(0)和backface-visibility:hidden是常见的GPU加速技巧，但有时候对SVG路径的针对性不够，这里给你几个更有效的解决方案：

1. 使用vector-effect: non-scaling-stroke强制SVG路径清晰度 #

这个SVG专属属性可以让路径在缩放、变换时保持原始的几何线条清晰度，避免浏览器对路径做模糊的插值处理。给你的.info-eyes类添加这个属性：

.info-eyes { 
  animation-name: info-eyes; 
  animation-duration: 6s; 
  animation-iteration-count: infinite; 
  transform: scale(1) translateZ(0); 
  transform-origin: 0% 75%; 
  backface-visibility: hidden; 
  -webkit-backface-visibility: hidden; 
  -webkit-transform: translateZ(0) scale(1, 1);
  vector-effect: non-scaling-stroke; /* 添加这行 */
}

它会确保SVG的路径不管怎么变换，都保持边缘锐利，尤其适合圆形这类规则图形。

2. 调整transform-origin为更合理的位置（或整数像素） #

你当前设置的transform-origin: 0% 75%可能导致变换时的偏移量落在亚像素位置，Chrome在渲染这类非整数像素的元素时容易出现模糊。考虑把变换原点改成眼睛的中心（圆形的圆心位置），比如：

.info-eyes {
  /* 其他属性不变 */
  transform-origin: 50% 50%; /* 替换原来的0% 75% */
}

如果知道眼睛路径的精确像素中心，也可以直接用整数像素值（比如31px 49px），进一步避免亚像素渲染问题。

3. 用will-change提示浏览器提前优化渲染 #

告诉浏览器这个元素即将发生变换，让它提前分配资源做渲染优化，减少动画过程中的模糊：

.info-eyes {
  /* 其他属性不变 */
  will-change: transform; /* 添加这行 */
}

4. 替换scale动画为clip-path实现眨眼 #

如果上面的方法还不够稳定，可以尝试用裁剪的方式实现眨眼效果——这种方式不需要缩放路径，而是通过裁剪显示区域来模拟闭眼，渲染稳定性更高：

.info-eyes {
  /* 移除原有的transform相关属性，替换为clip-path */
  animation-name: info-eyes;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  clip-path: inset(0 0 0 0); /* 初始显示完整眼睛 */
}

@keyframes info-eyes {
  0%, 96%, 100% { clip-path: inset(0 0 0 0); }
  98% { clip-path: inset(45% 0 45% 0); } /* 上下裁剪，只留中间一条线模拟闭眼 */
}

你可以尝试单独使用某一种方法，或者组合多个（比如同时加vector-effect和will-change），应该能解决页面缩放时的模糊问题。

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