火狐浏览器svg中g标签scrollIntoView异常问题解决

问题描述:

如下代码 在edge和chrome中点击文本居中,我是文本会滚动到视窗的中央位置,但是火狐浏览器会滚动到svg的顶部。

猜测可能得原因是不同的浏览器对于g标签的位置计算有差异,chrome会根据g标签中子元素的位置来定位，而火狐浏览器没有计算子元素的位置，并且认为g标签没有位置。

解决办法：

基于这个问题可以找一个有明确位置的元素进行定位比如 document.getElementById('group').firstChild

document.getElementById('group')?.firstChild?.scrollIntoView({
    behavior: 'smooth',
    block: 'center'
  })