CSS动画时SVG出现异常描边如何解决？附咖啡SVG优化需求

一、消除CSS动画时出现的异常线条 #

这种仅在动画阶段出现的线条，多是浏览器渲染路径动画时的精度偏差或渲染残留，可通过以下方法解决：

• 给动画的SVG元素添加paint-order: fill;，强制浏览器优先渲染填充层，避免描边类渲染残留
• 显式设置stroke-width: 0; + stroke: none;，双重覆盖浏览器默认的描边属性
• 检查动画前后的路径坐标，确保起点、终点完全匹配，避免路径插值过程中出现临时断裂
• 尝试关闭硬件加速优化，给元素添加transform: translate3d(0,0,0);，修正GPU渲染的精度问题

二、让咖啡内容SVG宽度超出杯身 #

要实现更自然的视觉效果，可通过以下方式扩展咖啡的宽度：

• 直接编辑咖啡路径的d属性，调整左右端点的x坐标，让路径宽度大于杯身（比如将左侧x值设为比杯身左边缘小10px，右侧x值设为比杯身右边缘大10px），同时微调曲线控制点保持形状自然
• 使用CSS缩放：给咖啡元素添加transform: scaleX(1.1);（根据需求调整缩放比例），并设置transform-origin: center bottom;，确保咖啡底部与杯身对齐
• 若之前用了clip-path或mask限制咖啡显示，需修改或移除这些裁剪规则，让咖啡路径可自然超出杯身范围

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