svg调试,获取g元素并将其居中

 如图所示,使用JS在svg内部居中g元素,用js自带的getBBox()方法来获取g元素的宽高

方法一:

通过设置g元素的transform属性来实现

const gelParams = document.getElementById('gel').getBBox();
const xPos = (800 - gelParams.width) / 2;
const yPos = (400 - gelParams.height) / 2;
$('#gel').attr('transform', `translate(${xPos}, ${yPos})`);

方法二:

通过设置svg的viewBox属性实现将内容铺满可视区域

const gelParams = document.getElementById('gel').getBBox();
$('svg').attr('viewBox', [0, 0, gelParams.width, gelParams.height]);

参考:https://zhuanlan.zhihu.com/p/649194077