如何为内联SVG内部<g>元素设置基于外部容器的绝对定位？

用CSS滚动驱动动画实现（无JS卡顿） #

现代浏览器支持原生CSS滚动驱动动画，完全不需要JS监听滚动事件，性能拉满，移动端也不会出现卡顿问题。

1. 给SVG的父容器定义滚动时序：

.svg-wrapper {
  scroll-timeline: --pageScroll block;
}

2. 给目标<g>元素添加反向滚动的动画：

svg #your-group-id {
  animation: keep-fixed linear;
  animation-timeline: --pageScroll;
}

@keyframes keep-fixed {
  to {
    transform: translateY(-100%);
  }
}

这个逻辑是让<g>随着页面滚动反向移动100%的距离，视觉上就固定在原地了。如果SVG本身有初始偏移，你可以给<g>加个初始的transform: translate(x, y)调整位置，同时给SVG设置overflow: hidden，就能保证元素不会超出SVG边界。

优化JS滚动监听（兼容旧浏览器） #

如果要兼容不支持滚动驱动动画的浏览器，别直接在scroll事件里操作DOM，改用requestAnimationFrame来批量更新，能大幅降低移动端卡顿：

let currentScroll = 0;
const fixedGroup = document.querySelector('#your-group-id');

function updatePosition() {
  fixedGroup.setAttribute('transform', `translate(0, ${-currentScroll})`);
  requestAnimationFrame(updatePosition);
}

window.addEventListener('scroll', () => {
  currentScroll = window.scrollY;
});

requestAnimationFrame(updatePosition);

这里把滚动值的获取和DOM更新分开，每一帧只更新一次位置，比直接在scroll事件里操作流畅太多。

关于“让相对于外部HTML定位”的说明 #

SVG内部元素的坐标系统绑定在SVG自身上下文里，没法直接让<g>像HTML元素那样用position: fixed相对于外部容器定位——因为SVG是独立的图形画布，内部元素的位置只能基于SVG的坐标规则计算。所以上面两种反向位移的模拟方案，是不拆分SVG前提下的最优解。

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