Safari下SVG位置偏移问题：响应式图片占位符布局求助

问题根源 #

Safari里SVG默认采用xMidYMid meet的缩放规则，会把内部元素居中显示；再加上原代码里SVG的viewBox和内部rect尺寸不匹配，就导致了跨浏览器表现差异——Chrome的容器布局刚好让SVG覆盖图片，但Safari里rect会居中，没法完全遮挡图片。

完整修复方案 #

1. 修正SVG核心属性 #

• 给SVG添加preserveAspectRatio="none"，强制它完全拉伸填满容器，忽略宽高比限制。
• 将rect的固定尺寸改为width="100%" height="100%"，让它跟随SVG尺寸自适应。
• viewBox的宽高要和图片实际尺寸一致，保证比例匹配，避免拉伸变形。

2. 完善动画与定位逻辑 #

• 用CSS动画实现1秒延迟后淡出，动画结束后让SVG保持隐藏状态。
• 通过flex布局的定位类，给容器添加position-top/position-bottom/position-left/position-right，实现竖版图片居左/右、横版图片居上/下的需求。

修改后的完整代码 #

CSS代码

.container {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden; /* 防止图片溢出容器 */
}

/* 图片定位类 */
.position-top { align-items: flex-start; }
.position-bottom { align-items: flex-end; }
.position-left { justify-content: flex-start; }
.position-right { justify-content: flex-end; }

.container img {
  max-width: 100%;
  max-height: 100%;
}

.container svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* 1秒延迟后淡出，结束后保持隐藏 */
  animation: fadeOut 1s ease-in-out 1s forwards;
}

/* 强制SVG拉伸填满容器，解决Safari居中问题 */
.container svg {
  preserveAspectRatio: none;
}

.container svg rect {
  width: 100%;
  height: 100%;
  fill: #f0f0f0; /* 自定义占位符背景色 */
}

@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

HTML代码

<!-- 横版图片-居上示例 -->
<div class="container position-top">
  <svg viewBox="0 0 1879 1200" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%"></rect>
  </svg>
  <img src="image.jpg" alt="横版图片">
</div>

<!-- 竖版图片-居左示例 -->
<div class="container position-left">
  <svg viewBox="0 0 1200 1879" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%"></rect>
  </svg>
  <img src="vertical-image.jpg" alt="竖版图片">
</div>

关键说明 #

• preserveAspectRatio="none"是解决Safari居中问题的核心，去掉它内部元素仍会居中显示。
• viewBox的宽高必须和图片实际尺寸一致，否则SVG比例会和图片不匹配，导致拉伸变形。
• 动画使用forwards属性，确保动画结束后SVG保持隐藏状态，不再遮挡图片。

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