macOS Safari不同缩放级别下img标签内SVG动画显示异常

这是WebKit内核（Safari全版本、iOS端所有第三方浏览器均受影响）存在多年的已知渲染缺陷：

• 当SVG以外部资源形式被<img>标签加载时，会走独立的栅格化渲染流程，不会和当前页面DOM共用同一套视口计算逻辑
• 在非整数倍页面缩放（如125%、175%）场景下，Safari对SVG的裁剪边界计算存在向下取整的误差，会少算右边缘、下边缘1px左右的裁剪范围
• SVG动画运行时，元素变换过程中落在这个未被裁剪的1px误差带内的内容就会直接穿透显示，也就是观察到的溢出破损效果
• 内联SVG不会触发该问题，是因为内联SVG直接参与主DOM树的渲染，裁剪边界会随页面缩放同步精确重算，不存在栅格化取整误差。

按适配成本、兼容性从优到劣排序：

• 方案1：修改SVG源文件viewBox预留1px安全边（最推荐，零副作用）
  不需要改动任何动画、路径代码，仅需把SVG根元素的viewBox范围向外扩展1px，让实际绘制内容和SVG视口边缘留出1px的透明缓冲带，即使Safari裁剪计算有1px误差，也不会出现内容溢出。
  以提供的复现代码为例，原viewBox为0 0 24 24，修改为-1 -1 26 26即可：

  <svg width="36" height="36" viewBox="-1 -1 26 26" xmlns="http://www.w3.org/2000/svg">
    <!-- 原有path、animateTransform代码完全保留无需修改 -->
  </svg>
  

• 方案2：通过CSS给img标签强制加裁剪规则（无需修改SVG源文件）
  给加载SVG的img元素添加两行CSS，强制触发独立合成层并严格按照img盒模型边界裁剪内容：

  img[src$=".svg"] {
    overflow: hidden;
    transform: translateZ(0);
  }
  

  注意必须添加transform: translateZ(0)触发硬件加速，否则单纯overflow: hidden在部分旧版Safari下不生效。
• 方案3：场景允许时优先使用内联SVG
  内联SVG完全不会触发该渲染bug，同时支持用CSS自定义SVG内部的路径颜色、样式，缺点是会增加HTML体积，不适合需要高频复用同一份SVG资源的场景。
• 方案4：给img添加极小圆角绕过裁剪bug
  给对应img元素设置border-radius: 1px，可以强制Safari走圆角裁剪逻辑绕开原本的矩形裁剪计算误差，缺点是如果SVG是严格直角设计，1px圆角可能对视觉效果有微小影响。

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