关于节点旋转的疑问(transform/transformorigin)

[atomMacros]

就是在添加添加的时候，在style里面配置旋转角度(transform: 'rotate(40deg)')以及旋转的中心点(transformOrigin:'center'), 这个节点会跑到左上角，当拖拽的时候，又回到了正确的位置，这是为什么？

在官方的Demo里面也会，就是设置了旋转属性，没有按照预期在原有的位置在中心点旋转

官方的demo

import { Graph } from '@antv/g6';

const data = {
  nodes: [
    { id: 'node-1', type: 'circle', style: { x: 80, y: 200, size: 30 } },
    {
      id: 'node-2',
      type: 'rect',
      style: {
        x: 250,
        y: 200,
        size: 50,
        port: true,
        ports: [
          { key: 'port-1', placement: [0, 0.15] },
          { key: 'port-2', placement: [0, 0.5] },
          { key: 'port-3', placement: [0, 0.85] },
        ],
        transform: 'rotate(40deg)',
        transformOrigin: '200 250'
      },
    },
  ],
  edges: [
    { id: 'edge-1', source: 'node-1', target: 'node-2', style: { targetPort: 'port-1' } },
    { id: 'edge-2', source: 'node-1', target: 'node-2', style: { targetPort: 'port-2' } },
    { id: 'edge-3', source: 'node-1', target: 'node-2', style: { targetPort: 'port-3' } },
  ],
};

const graph = new Graph({
  data,
  edge: {
    style: {
      endArrow: true,
    },
  },
});

graph.render();

window.addPanel((gui) => {
  const config = { show: false, position: 'outline' };
  gui.add(config, 'position', ['outline', 'center']).onChange((value) => {
    graph.updateNodeData([{ id: 'node-2', style: { portLinkToCenter: value === 'center' } }]);
    graph.draw();
  });
  gui
    .add(config, 'show')
    .onChange((value) => {
      graph.updateNodeData([{ id: 'node-2', style: { portR: value ? 5 : 0 } }]);
      graph.draw();
    })
    .name('show ports');
});