关于 Svg 使用 transform：scale（）缩放后元素发生位移的问题，修改元素缩放中心点

接到一个需求，是公司前辈用 svg 写的代码结构，现在要让画布上的元素在发生改变，放大缩小的时候，保持画布不动，让元素实现原地缩放，让我们现来看看原本的效果是如何的
当我在点击放大或者缩小的时候元素发生了位移，而现在我需要实现的是元素在原地进行放大和缩小的效果。
有试过给 svg 添加 viewBox 属性，这样确实能让元素实现原地的方法和缩小功能，但是，缩放的中心点还是无法改变，而我的项目添加 viewBox 后很奇怪的会引起其他的一些问题，这让我放弃了使用 viewBox 后来在查阅 C3的 transform 属性时 发现了可以设置 scale 的基准点来达到效果。
可以使用 transform-origin 来调整缩放的基准点

// transform-origin
transform-origin: 10px 10px;
transform-origin：center;

transform-origin 有两个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；这两个参数除了可以设置为具体的像素值，还可以直接指定一个参数为left、center、right，那么第二个参数可以指定为top、center、bottom
由于我需要的是中心点缩放，即让元素一直保持在画布的中间位置，当我给 svg 内的标签添加transform-origin：center上属性后，就可以了，注意：是添加 css 样式。
看一下最终的实现效果，这样，再次点击，放大或缩小时元素就会在中心进行缩放，不会发生位移情况