网页渲染视差动画时SVG被截断，设置overflow和调整viewbox均无效如何解决

根因说明 #

该问题本质是SVG平移过程中超出了浏览器默认合成层绘制区域，或是外层容器存在未排查到的裁剪规则，之前尝试的单元素overflow: visible、未预留空间的viewBox调整没有命中核心影响点，因此无法生效。

可落地解决步骤 #

• 检查所有包含动画SVG的父级容器，给每一层父容器都添加overflow: visible，仅给SVG本身设置该属性不会生效，父容器默认的裁剪规则会直接截断超出区域的SVG内容
• 给执行translateX动画的SVG元素添加CSS属性will-change: transform，可补充transform: translateZ(0)强制开启GPU合成，避免浏览器为了优化性能自动裁剪视口外的SVG内容
• 调整SVG的viewBox属性时需要预留足够横向空间：如果是往X轴负方向平移，可将viewBox的第一个参数（x轴偏移）设为负值，同时放大宽度参数，例如原viewBox="0 0 1920 1080"可调整为viewBox="-1920 0 3840 1080"，给左右平移预留两倍宽度的绘制空间
• 如果是多层SVG做视差效果，建议给每层SVG外层套一个和视口等宽的透明div容器，所有translateX动画逻辑绑定在这个div容器上，而非直接绑定在SVG根元素上，避免SVG本身的坐标空间和动画transform规则冲突

内容的提问来源于stack exchange，提问作者Sai Teja T