SVG变形动画无法占满屏幕宽度问题求助

针对你的需求（SVG作为背景颜色变形切换，允许变形），可以通过以下调整解决：

• 强制SVG本身占满容器：给SVG标签添加width="100%" height="100%"属性，覆盖SVG自带的默认尺寸约束。
• 简化fixed定位写法：你的.img类已设置position: fixed; top: 0; left: 0; right: 0; bottom: 0;，这已经能让元素自动占满整个视口，无需额外设置width:100%; height:100vh; margin:auto;，冗余属性可能导致布局冲突。
• 调整object-fit（可选）：既然允许变形，object-fit: fill是合适的；如果调整后仍有问题，可尝试移除该属性，让SVG自然拉伸适配。

修改后的CSS示例：

.container {
  height: 5000px; /* 页面高度 */
}
.img {
  position: fixed;
  top: 0;
  left: 0; 
  right: 0;
  bottom: 0;
  transition: opacity 0s ease-in-out;
  opacity: 0;
  /* 强制SVG拉伸占满视口 */
  width: 100% !important;
  height: 100% !important;
}
.img.transition {
  transition: opacity 0s ease-in-out;
}
.img.active {
  opacity: 1;
}

额外检查：确认SVG文件是否设置了固定的width和height属性，若有则直接删除或改为100%；同时保证SVG的viewBox属性正确设置（如viewBox="0 0 原始宽度 原始高度"），确保拉伸时不会出现空白区域。

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