如何确保SVG路径始终处于视口正中央，及React-Native迁移相关问题

优先纯CSS适配方案（无需JS监听，解决Safari缩放失效问题） #

现有居中失效大概率是定位写法的兼容性问题，使用以下fixed定位规则可覆盖绝大多数Safari缩放场景，无需额外JS逻辑：

/* 顶层SVG的样式 */
.top-fixed-svg {
  position: fixed;
  /* 四周边距设为0，配合margin: auto实现自动居中 */
  inset: 0;
  margin: auto;
  /* 按需设置固定宽高即可 */
  width: 100px;
  height: 100px;
}

如果需要兼容更旧的Safari版本，可以替换为以下写法：

.top-fixed-svg {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
}

视口变化监听方案 #

如果确实需要在视口所有变化场景下动态调整位置，可以使用visualViewport API，该API专门适配浏览器缩放、虚拟键盘弹出、窗口大小调整等所有会改变可见视口范围的场景，Safari完全支持：

// 绑定视觉视口变化监听
const viewport = window.visualViewport
viewport.addEventListener('resize', repositionTopSvg)
viewport.addEventListener('scroll', repositionTopSvg)

function repositionTopSvg() {
  const topSvg = document.querySelector('.top-fixed-svg')
  const svgWidth = topSvg.offsetWidth
  const svgHeight = topSvg.offsetHeight
  // 基于视觉视口的实际宽高计算居中位置
  topSvg.style.left = `${(viewport.width - svgWidth) / 2}px`
  topSvg.style.top = `${(viewport.height - svgHeight) / 2}px`
}

现有网页端的布局规则基本无法直接复用，差异点如下：

• React Native没有浏览器的CSS定位体系，不存在position: fixed属性，所有布局基于Flexbox实现，position: absolute仅相对于父元素生效，要实现全局固定居中的顶层元素，可以基于根容器的绝对定位或者Modal组件实现。
• React Native不支持直接解析SVG标签，需要引入react-native-svg库完成SVG渲染，原有的SVG路径参数可以复用，但标签和样式写法需要适配库的规则。

内容的提问来源于stack exchange，提问作者Steve M.