feat: refine theme and add support background (#5538)

* refactor: support setting background

* docs: add theme demo

* test: update snapshots

* feat: palette field support callback

* test: update tests and snapshots

* fix: wordwrap set false

* fix: fix cr issues

* fix: animation field

* test: update test case and snapshots

.vscode/settings.json

@@ -15,6 +15,7 @@
     "aftersizechange",
     "aftertransform",
     "afterviewportanimate",
+    "antv",
     "bbox",
     "beforeanimate",
     "beforedraw",

packages/g6/__tests__/dataset/dagre-combo.json

@@ -0,0 +1,35 @@
+{
+  "nodes": [
+    { "id": "0" },
+    { "id": "1" },
+    { "id": "2" },
+    { "id": "3" },
+    { "id": "4", "style": { "parentId": "A" } },
+    { "id": "5", "style": { "parentId": "B" } },
+    { "id": "6", "style": { "parentId": "A" } },
+    { "id": "7", "style": { "parentId": "C" } },
+    { "id": "8", "style": { "parentId": "C" } },
+    { "id": "9", "style": { "parentId": "A" } },
+    { "id": "10", "style": { "parentId": "B" } },
+    { "id": "11", "style": { "parentId": "B" } }
+  ],
+  "edges": [
+    { "id": "edge-102", "source": "0", "target": "1" },
+    { "id": "edge-161", "source": "0", "target": "2" },
+    { "id": "edge-237", "source": "1", "target": "4" },
+    { "id": "edge-253", "source": "0", "target": "3" },
+    { "id": "edge-133", "source": "3", "target": "4" },
+    { "id": "edge-320", "source": "2", "target": "5" },
+    { "id": "edge-355", "source": "1", "target": "6" },
+    { "id": "edge-823", "source": "1", "target": "7" },
+    { "id": "edge-665", "source": "3", "target": "8" },
+    { "id": "edge-884", "source": "3", "target": "9" },
+    { "id": "edge-536", "source": "5", "target": "10" },
+    { "id": "edge-401", "source": "5", "target": "11" }
+  ],
+  "combos": [
+    { "id": "A", "style": { "type": "rect" } },
+    { "id": "B", "style": { "type": "rect" } },
+    { "id": "C", "style": { "type": "rect" } }
+  ]
+}

packages/g6/__tests__/demo/animation/controller-element-state.ts

@@ -29,11 +29,11 @@ export const controllerElementState: AnimationTestCase = async (context) => {
           lineWidth: 2,
         },
         selected: {
-          fill: 'pink',
+          color: 'pink',
         },
       },
       animation: {
-        update: [{ fields: ['lineWidth', 'fill'] }],
+        update: [{ fields: ['lineWidth', 'color'] }],
       },
     },
     edge: {
@@ -43,13 +43,13 @@ export const controllerElementState: AnimationTestCase = async (context) => {
       state: {
         active: {
           lineWidth: 2,
-          stroke: 'pink',
+          color: 'pink',
         },
       },
       animation: {
         update: [
           {
-            fields: ['lineWidth', 'stroke'],
+            fields: ['lineWidth', 'color'],
           },
         ],
       },

packages/g6/__tests__/demo/animation/controller-element.ts

@@ -33,9 +33,9 @@ export const controllerElement: AnimationTestCase = async (context) => {
   await graph.render();
 
   graph.addNodeData([
-    { id: 'node-4', style: { x: 50, y: 200, fill: 'orange' } },
-    { id: 'node-5', style: { x: 75, y: 150, fill: 'purple' } },
-    { id: 'node-6', style: { x: 200, y: 100, fill: 'cyan' } },
+    { id: 'node-4', style: { x: 50, y: 200, color: 'orange' } },
+    { id: 'node-5', style: { x: 75, y: 150, color: 'purple' } },
+    { id: 'node-6', style: { x: 200, y: 100, color: 'cyan' } },
   ]);
 
   graph.removeNodeData(['node-1']);

packages/g6/__tests__/demo/case/element-change-type.ts

@@ -6,7 +6,7 @@ export const elementChangeType: STDTestCase = async (context) => {
     ...context,
     data: {
       nodes: [
-        { id: 'node-1', style: { x: 100, y: 100, type: 'rect' } },
+        { id: 'node-1', style: { x: 100, y: 100, type: 'rect', color: 'transparent', stroke: '#1783ff' } },
         { id: 'node-2', style: { x: 200, y: 100 } },
       ],
       edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2' }],

packages/g6/__tests__/demo/case/element-state.ts

@@ -27,7 +27,7 @@ export const elementState: STDTestCase = async (context) => {
           lineWidth: 2,
         },
         selected: {
-          fill: 'pink',
+          color: 'pink',
         },
       },
       animation: {
@@ -41,7 +41,7 @@ export const elementState: STDTestCase = async (context) => {
       state: {
         active: {
           lineWidth: 2,
-          stroke: 'pink',
+          color: 'pink',
         },
       },
       animation: {

packages/g6/__tests__/demo/case/index.ts

@@ -30,4 +30,5 @@ export * from './layout-radial-prevent-overlap';
 export * from './layout-radial-prevent-overlap-unstrict';
 export * from './layout-radial-sort';
 export * from './plugin-grid-line';
+export * from './theme';
 export * from './viewport-fit';

packages/g6/__tests__/demo/case/layout-circular-basic.ts

@@ -5,20 +5,12 @@ import type { STDTestCase } from '../types';
 export const layoutCircularBasic: STDTestCase = async (context) => {
   const graph = new Graph({
     ...context,
+    autoFit: 'view',
     data,
     layout: {
       type: 'circular',
     },
-    node: {
-      style: {
-        size: 20,
-        fill: '#EFF4FF',
-        lineWidth: 1,
-        stroke: '#5F95FF',
-      },
-    },
     behaviors: ['zoom-canvas', 'drag-canvas'],
-    autoFit: 'view',
   });
 
   await graph.render();

packages/g6/__tests__/demo/case/layout-circular-configuration-translate.ts

@@ -5,28 +5,18 @@ import type { STDTestCase } from '../types';
 export const layoutCircularConfigurationTranslate: STDTestCase = async (context) => {
   const graph = new Graph({
     ...context,
+    autoFit: 'view',
     data,
+    edge: {
+      style: {
+        endArrow: true,
+        endArrowType: 'vee',
+      },
+    },
     layout: {
       type: 'circular',
     },
-    node: {
-      style: {
-        size: 20,
-        fill: '#EFF4FF',
-        lineWidth: 1,
-        stroke: '#5F95FF',
-      },
-    },
-    edge: {
-      style: {
-        endArrow: {
-          path: 'M 0,0 L 8,4 L 8,-4 Z',
-          fill: '#e2e2e2',
-        },
-      },
-    },
     behaviors: ['drag-canvas', 'drag-node'],
-    autoFit: 'view',
   });
 
   await graph.render();

packages/g6/__tests__/demo/case/layout-circular-degree.ts

@@ -5,22 +5,24 @@ import type { STDTestCase } from '../types';
 export const layoutCircularDegree: STDTestCase = async (context) => {
   const graph = new Graph({
     ...context,
+    autoFit: 'view',
     data,
+    node: {
+      style: {
+        labelText: (d: { id: string }) => d.id,
+      },
+    },
+    edge: {
+      style: {
+        endArrow: true,
+        endArrowType: 'vee',
+      },
+    },
     layout: {
       type: 'circular',
       ordering: 'degree',
     },
-    node: {
-      style: {
-        size: 20,
-        labelText: (d: { id: string }) => d.id,
-        fill: '#EFF4FF',
-        lineWidth: 1,
-        stroke: '#5F95FF',
-      },
-    },
     behaviors: ['zoom-canvas', 'drag-canvas'],
-    autoFit: 'view',
   });
 
   await graph.render();

packages/g6/__tests__/demo/case/layout-circular-division.ts

@@ -5,7 +5,19 @@ import type { STDTestCase } from '../types';
 export const layoutCircularDivision: STDTestCase = async (context) => {
   const graph = new Graph({
     ...context,
+    autoFit: 'view',
     data,
+    node: {
+      style: {
+        labelText: (d: { id: string }) => d.id,
+      },
+    },
+    edge: {
+      style: {
+        endArrow: true,
+        endArrowType: 'vee',
+      },
+    },
     layout: {
       type: 'circular',
       divisions: 5,
@@ -13,24 +25,7 @@ export const layoutCircularDivision: STDTestCase = async (context) => {
       startAngle: Math.PI / 4,
       endAngle: Math.PI,
     },
-    node: {
-      style: {
-        size: 20,
-        fill: '#EFF4FF',
-        lineWidth: 1,
-        stroke: '#5F95FF',
-      },
-    },
-    edge: {
-      style: {
-        endArrow: {
-          path: 'M 0,0 L 8,4 L 8,-4 Z',
-          fill: '#e2e2e2',
-        },
-      },
-    },
-    behaviors: ['drag-canvas', 'drag-node'],
-    autoFit: 'view',
+    behaviors: ['zoom-canvas', 'drag-canvas'],
   });
 
   await graph.render();

packages/g6/__tests__/demo/case/layout-circular-spiral.ts

@@ -5,31 +5,25 @@ import type { STDTestCase } from '../types';
 export const layoutCircularSpiral: STDTestCase = async (context) => {
   const graph = new Graph({
     ...context,
+    autoFit: 'view',
     data,
+    node: {
+      style: {
+        labelText: (d: { id: string }) => d.id,
+      },
+    },
+    edge: {
+      style: {
+        endArrow: true,
+        endArrowType: 'vee',
+      },
+    },
     layout: {
       type: 'circular',
       startRadius: 10,
       endRadius: 300,
     },
-    node: {
-      style: {
-        size: 20,
-        labelText: (d: { id: string }) => d.id,
-        fill: '#EFF4FF',
-        lineWidth: 1,
-        stroke: '#5F95FF',
-      },
-    },
-    edge: {
-      style: {
-        endArrow: {
-          path: 'M 0,0 L 8,4 L 8,-4 Z',
-          fill: '#e2e2e2',
-        },
-      },
-    },
-    behaviors: ['drag-canvas', 'drag-node'],
-    autoFit: 'view',
+    behaviors: ['zoom-canvas', 'drag-canvas'],
   });
 
   await graph.render();

packages/g6/__tests__/demo/case/layout-concentric.ts

@@ -5,27 +5,14 @@ import type { STDTestCase } from '../types';
 export const layoutConcentric: STDTestCase = async (context) => {
   const graph = new Graph({
     ...context,
-    autoFit: 'center',
+    autoFit: 'view',
     data,
-    behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node'],
     layout: {
       type: 'concentric',
       maxLevelDiff: 0.5,
       preventOverlap: true,
     },
-    node: {
-      style: {
-        size: 5,
-        stroke: '#5B8FF9',
-        fill: '#C6E5FF',
-        lineWidth: 1,
-      },
-    },
-    edge: {
-      style: {
-        stroke: '#E2E2E2',
-      },
-    },
+    behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node'],
     animation: false,
   });
 

packages/g6/__tests__/demo/case/layout-dagre-flow-combo.ts

@@ -1,5 +1,5 @@
 import { Graph } from '@/src';
-import data from '@@/dataset/dagre.json';
+import data from '@@/dataset/dagre-combo.json';
 import type { STDTestCase } from '../types';
 
 type Item = {
@@ -12,41 +12,40 @@ type Item = {
 export const layoutDagreFlowCombo: STDTestCase = async (context) => {
   const graph = new Graph({
     ...context,
+    autoFit: 'view',
     data,
-    layout: {
-      type: 'dagre',
-      ranksep: 50,
-      nodesep: 5,
-    },
     node: {
       style: {
         type: 'rect',
         size: [60, 30],
         radius: 8,
-        labelPlacement: 'center',
         labelText: (d: Item) => d.id,
-        fill: (item: Item) => {
-          const styles: { [key: string]: string } = { A: '#F09056', B: '#D580FF', C: '#01C9C9' };
-          return styles[item.style?.parentId] || '#1883FF';
-        },
+        labelPlacement: 'center',
+      },
+      palette: {
+        field: (d: any) => d.style?.parentId,
       },
     },
     edge: {
       style: {
         type: 'polyline',
         endArrow: true,
-        lineWidth: 2,
-        stroke: '#C2C8D5',
       },
     },
     combo: {
       style: {
+        type: 'rect',
+        radius: 8,
         labelText: (d: Item) => d.id,
         lineDash: 0,
         collapsedLineDash: [5, 5],
       },
     },
-    autoFit: 'view',
+    layout: {
+      type: 'dagre',
+      ranksep: 50,
+      nodesep: 5,
+    },
     behaviors: ['drag-combo', 'drag-node', 'drag-canvas', 'zoom-canvas'],
   });
 

packages/g6/__tests__/demo/case/layout-dagre-flow.ts

@@ -5,6 +5,7 @@ import type { STDTestCase } from '../types';
 export const layoutDagreFlow: STDTestCase = async (context) => {
   const graph = new Graph({
     ...context,
+    autoFit: 'view',
     data,
     node: {
       style: {
@@ -18,12 +19,18 @@ export const layoutDagreFlow: STDTestCase = async (context) => {
     edge: {
       style: {
         type: 'polyline',
+        radius: 20,
         endArrow: true,
         lineWidth: 2,
-        stroke: '#C2C8D5',
+        color: '#C2C8D5',
       },
     },
-    autoFit: 'view',
+    layout: {
+      type: 'dagre',
+      nodesep: 100,
+      ranksep: 70,
+      controlPoints: true,
+    },
     behaviors: ['drag-combo', 'drag-node', 'drag-canvas', 'zoom-canvas'],
   });
 

packages/g6/__tests__/demo/case/layout-fruchterman-basic.ts

@@ -6,23 +6,18 @@ export const layoutFruchtermanBasic: STDTestCase = async (context) => {
   const graph = new Graph({
     ...context,
     data,
-    behaviors: ['drag-canvas', 'drag-node'],
+    node: {
+      style: {
+        labelPlacement: 'center',
+        labelText: (d: any) => d.id,
+      },
+    },
     layout: {
       type: 'fruchterman',
       gravity: 5,
       speed: 5,
     },
-    node: {
-      style: {
-        size: 30,
-        stroke: '#5B8FF9',
-        fill: '#C6E5FF',
-        lineWidth: 1,
-        labelPlacement: 'center',
-        labelText: (d: any) => d.id,
-        labelBackground: false,
-      },
-    },
+    behaviors: ['drag-canvas', 'drag-node'],
   });
 
   await graph.render();

packages/g6/__tests__/demo/case/layout-fruchterman-cluster.ts

@@ -6,31 +6,23 @@ export const layoutFruchtermanCluster: STDTestCase = async (context) => {
   const graph = new Graph({
     ...context,
     data: { ...data, nodes: data.nodes.map((n) => ({ ...n, cluster: n.data.cluster })) },
-    behaviors: ['drag-canvas', 'drag-node'],
+    node: {
+      style: {
+        labelPlacement: 'center',
+        labelText: (d: any) => d.id,
+      },
+      palette: {
+        field: 'cluster',
+      },
+    },
     layout: {
       type: 'fruchterman',
-      gravity: 10,
+      gravity: 5,
       speed: 5,
       clustering: true,
       nodeClusterBy: 'cluster',
     },
-    node: {
-      style: {
-        size: 20,
-        stroke: '#5B8FF9',
-        fill: '#C6E5FF',
-        lineWidth: 1,
-        labelPlacement: 'center',
-        labelText: (d: any) => d.id,
-        labelBackground: false,
-      },
-    },
-    edge: {
-      style: {
-        endArrow: true,
-        endArrowPath: 'M 0,0 L 4,2 L 4,-2 Z',
-      },
-    },
+    behaviors: ['drag-canvas', 'drag-node'],
   });
 
   await graph.render();

packages/g6/__tests__/demo/case/layout-fruchterman-fix.ts

@@ -6,25 +6,12 @@ export const layoutFruchtermanFix: STDTestCase = async (context) => {
   const graph = new Graph({
     ...context,
     data,
-    behaviors: ['drag-canvas', 'drag-node'],
     layout: {
       type: 'fruchterman',
       speed: 10,
       maxIteration: 500,
     },
-    node: {
-      style: {
-        size: 15,
-        stroke: '#5B8FF9',
-        fill: '#C6E5FF',
-        lineWidth: 1,
-      },
-    },
-    edge: {
-      style: {
-        stroke: '#E2E2E2',
-      },
-    },
+    behaviors: ['drag-canvas', 'drag-node'],
   });
 
   graph.on('node:dragstart', function () {

packages/g6/__tests__/demo/case/layout-grid.ts

@@ -6,19 +6,16 @@ export const layoutGrid: STDTestCase = async (context) => {
   const graph = new Graph({
     ...context,
     data,
-    behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
+    node: {
+      style: {
+        labelText: (d: any) => d.id,
+      },
+    },
     layout: {
       type: 'grid',
       sortBy: 'cluster',
     },
-    node: {
-      style: {
-        size: 20,
-        stroke: '#ccc',
-        lineWidth: 1,
-        labelText: (d: any) => d.id,
-      },
-    },
+    behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
   });
 
   await graph.render();

packages/g6/__tests__/demo/case/layout-mds.ts

@@ -8,22 +8,16 @@ export const layoutMDS: STDTestCase = async (context) => {
     padding: 20,
     autoFit: 'view',
     data,
+    node: {
+      style: {
+        labelText: (d: any) => d.id,
+        labelPlacement: 'center',
+      },
+    },
     layout: {
       type: 'mds',
       linkDistance: 100,
     },
-    node: {
-      style: {
-        size: 20,
-        stroke: '#9ec9ff',
-        fill: '#eee',
-        lineWidth: 1,
-        labelText: (d: any) => d.id,
-        labelFontSize: 12,
-        labelPlacement: 'center',
-        labelBackground: false,
-      },
-    },
     behaviors: ['drag-node', 'drag-canvas', 'zoom-canvas', 'click-select'],
   });
 

packages/g6/__tests__/demo/case/layout-radial-basic.ts

@@ -6,20 +6,16 @@ export const layoutRadialBasic: STDTestCase = async (context) => {
   const graph = new Graph({
     ...context,
     data,
-    layout: {
-      type: 'radial',
-      unitRadius: 50,
-    },
     node: {
       style: {
         labelText: (d: { id: string }) => d.id,
         labelPlacement: 'center',
-        size: 20,
-        fill: '#EFF4FF',
-        lineWidth: 1,
-        stroke: '#5F95FF',
       },
     },
+    layout: {
+      type: 'radial',
+      unitRadius: 50,
+    },
     behaviors: ['drag-canvas', 'drag-node'],
   });
 

packages/g6/__tests__/demo/case/layout-radial-configuration-translate.ts

@@ -6,28 +6,22 @@ export const layoutRadialConfigurationTranslate: STDTestCase = async (context) =
   const graph = new Graph({
     ...context,
     data,
-    layout: {
-      type: 'radial',
-      unitRadius: 50,
-    },
     node: {
       style: {
         labelText: (d: { id: string }) => d.id,
         labelPlacement: 'center',
-        size: 20,
-        fill: '#EFF4FF',
-        lineWidth: 1,
-        stroke: '#5F95FF',
       },
     },
     edge: {
       style: {
-        endArrow: {
-          path: 'M 0,0 L 8,4 L 8,-4 Z',
-          fill: '#e2e2e2',
-        },
+        endArrow: true,
+        endArrowType: 'vee',
       },
     },
+    layout: {
+      type: 'radial',
+      unitRadius: 50,
+    },
     behaviors: ['drag-canvas', 'drag-node'],
   });
 

packages/g6/__tests__/demo/case/layout-radial-prevent-overlap-unstrict.ts

@@ -6,30 +6,24 @@ export const layoutRadialPreventOverlapUnstrict: STDTestCase = async (context) =
   const graph = new Graph({
     ...context,
     data,
+    node: {
+      style: {
+        labelText: (d: { id: string }) => d.id,
+        labelPlacement: 'center',
+      },
+    },
+    edge: {
+      style: {
+        endArrow: true,
+        endArrowType: 'vee',
+      },
+    },
     layout: {
       type: 'radial',
       unitRadius: 70,
       preventOverlap: true,
       strictRadial: false,
     },
-    node: {
-      style: {
-        labelText: (d: { id: string }) => d.id,
-        labelPlacement: 'center',
-        size: 20,
-        fill: '#EFF4FF',
-        lineWidth: 1,
-        stroke: '#5F95FF',
-      },
-    },
-    edge: {
-      style: {
-        endArrow: {
-          path: 'M 0,0 L 8,4 L 8,-4 Z',
-          fill: '#e2e2e2',
-        },
-      },
-    },
     behaviors: ['drag-canvas', 'drag-node'],
   });
 

packages/g6/__tests__/demo/case/layout-radial-prevent-overlap.ts

@@ -6,30 +6,24 @@ export const layoutRadialPreventOverlap: STDTestCase = async (context) => {
   const graph = new Graph({
     ...context,
     data,
+    node: {
+      style: {
+        labelText: (d: { id: string }) => d.id,
+        labelPlacement: 'center',
+      },
+    },
+    edge: {
+      style: {
+        endArrow: true,
+        endArrowType: 'vee',
+      },
+    },
     layout: {
       type: 'radial',
       unitRadius: 50,
       preventOverlap: true,
       maxPreventOverlapIteration: 100,
     },
-    node: {
-      style: {
-        labelText: (d: { id: string }) => d.id,
-        labelPlacement: 'center',
-        size: 20,
-        fill: '#EFF4FF',
-        lineWidth: 1,
-        stroke: '#5F95FF',
-      },
-    },
-    edge: {
-      style: {
-        endArrow: {
-          path: 'M 0,0 L 8,4 L 8,-4 Z',
-          fill: '#e2e2e2',
-        },
-      },
-    },
     behaviors: ['drag-canvas', 'drag-node'],
   });
 

packages/g6/__tests__/demo/case/layout-radial-sort.ts

@@ -6,6 +6,18 @@ export const layoutRadialSort: STDTestCase = async (context) => {
   const graph = new Graph({
     ...context,
     data,
+    node: {
+      style: {
+        labelText: (d: { id: string }) => d.id,
+        labelPlacement: 'center',
+      },
+    },
+    edge: {
+      style: {
+        endArrow: true,
+        endArrowType: 'vee',
+      },
+    },
     layout: {
       type: 'radial',
       unitRadius: 70,
@@ -16,24 +28,6 @@ export const layoutRadialSort: STDTestCase = async (context) => {
       sortBy: 'sortAttr2',
       sortStrength: 50,
     },
-    node: {
-      style: {
-        labelText: (d: { id: string }) => d.id,
-        labelPlacement: 'center',
-        size: 20,
-        fill: '#EFF4FF',
-        lineWidth: 1,
-        stroke: '#5F95FF',
-      },
-    },
-    edge: {
-      style: {
-        endArrow: {
-          path: 'M 0,0 L 8,4 L 8,-4 Z',
-          fill: '#e2e2e2',
-        },
-      },
-    },
     behaviors: ['drag-canvas', 'drag-node'],
   });
 

packages/g6/__tests__/demo/case/plugin-grid-line.ts

@@ -6,13 +6,8 @@ import type { STDTestCase } from '../types';
 export const pluginGridLine: STDTestCase = async (context) => {
   const graph = new Graph({
     ...context,
-    data,
-    node: {
-      style: {
-        size: 20,
-      },
-    },
     autoResize: true,
+    data,
     layout: { type: 'd3force' },
     behaviors: ['drag-canvas'],
     plugins: [{ type: 'grid-line', follow: false }],

packages/g6/__tests__/demo/case/theme.ts

@@ -0,0 +1,86 @@
+import { Graph } from '@/src';
+import data from '../../dataset/cluster.json';
+import type { STDTestCase } from '../types';
+
+export const theme: STDTestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    autoFit: 'view',
+    data,
+    node: {
+      palette: {
+        field: 'cluster',
+      },
+    },
+    layout: {
+      type: 'radial',
+      unitRadius: 80,
+    },
+  });
+
+  await graph.render();
+
+  theme.form = (panel) => {
+    const config = {
+      theme: 'light',
+    };
+    const options = { Light: 'light', Dark: 'dark', Blue: 'blue' };
+
+    const themeOptions: { [key: string]: any } = {
+      light: {
+        background: '#fff',
+        theme: 'light',
+        node: {
+          palette: {
+            field: 'cluster',
+          },
+        },
+      },
+      dark: {
+        background: '#000',
+        theme: 'dark',
+        node: {
+          palette: {
+            field: 'cluster',
+          },
+        },
+      },
+      blue: {
+        background: '#f3faff',
+        theme: 'light',
+        node: {
+          palette: {
+            type: 'group',
+            field: 'cluster',
+            color: 'blues',
+            invert: true,
+          },
+        },
+      },
+      yellow: {
+        background: '#fcf9f1',
+        theme: 'light',
+        node: {
+          palette: {
+            type: 'group',
+            field: 'cluster',
+            color: ['#ffe7ba', '#ffd591', '#ffc069', '#ffa940', '#fa8c16', '#d46b08', '#ad4e00', '#873800', '#612500'],
+          },
+        },
+      },
+    };
+
+    const changeTheme = (theme: string) => {
+      graph.setOptions(themeOptions[theme]);
+      graph.render();
+    };
+
+    return [
+      panel.add(config, 'theme', options).onChange((value: string) => {
+        changeTheme(value);
+      }),
+    ];
+  };
+
+  return graph;
+};

packages/g6/__tests__/demo/case/viewport-fit.ts

@@ -15,7 +15,7 @@ export const viewportFit: STDTestCase = async (context) => {
     node: {
       style: {
         size: 50,
-        fill: (d: any) => (d.id === '1' ? '#d4414c' : '#2f363d'),
+        color: (d: any) => (d.id === '1' ? '#d4414c' : '#2f363d'),
       },
     },
     behaviors: ['zoom-canvas', 'drag-canvas'],

packages/g6/__tests__/demo/static/controller-element-z-index.ts

@@ -7,9 +7,9 @@ export const controllerElementZIndex: STDTestCase = async (context) => {
     ...context,
     data: {
       nodes: [
-        { id: 'node-1', style: { x: 150, y: 150, fill: 'red' } },
-        { id: 'node-2', style: { x: 175, y: 175, fill: 'green' } },
-        { id: 'node-3', style: { x: 200, y: 200, fill: 'blue' } },
+        { id: 'node-1', style: { x: 150, y: 150, color: 'red' } },
+        { id: 'node-2', style: { x: 175, y: 175, color: 'green' } },
+        { id: 'node-3', style: { x: 200, y: 200, color: 'blue' } },
       ],
     },
     theme: 'light',

packages/g6/__tests__/demo/static/edge-arrow.ts

@@ -29,6 +29,7 @@ export const edgeArrow: StaticTestCase = async (context) => {
       style: {
         type: 'line', // 👈🏻 Edge shape type.
         labelText: (d: any) => d.id,
+        labelBackground: true,
         endArrow: true,
         endArrowType: (d: any) => d.id.split('-')[0],
       },

packages/g6/__tests__/demo/static/edge-cubic-horizontal.ts

@@ -49,6 +49,7 @@ export const edgeCubicHorizontal: StaticTestCase = async (context) => {
       style: {
         type: 'cubic-horizontal', // 👈🏻 Edge shape type.
         labelText: (d: any) => d.id,
+        labelBackground: true,
         endArrow: true,
       },
     },

packages/g6/__tests__/demo/static/edge-cubic-vertical.ts

@@ -49,6 +49,7 @@ export const edgeCubicVertical: StaticTestCase = async (context) => {
       style: {
         type: 'cubic-vertical', // 👈🏻 Edge shape type.
         labelText: (d: any) => d.id,
+        labelBackground: true,
         endArrow: true,
       },
     },

packages/g6/__tests__/demo/static/edge-cubic.ts

@@ -43,6 +43,7 @@ export const edgeCubic: StaticTestCase = async (context) => {
       style: {
         type: 'cubic', // 👈🏻 Edge shape type.
         labelText: (d: any) => d.id,
+        labelBackground: true,
         endArrow: true,
       },
     },

packages/g6/__tests__/demo/static/edge-custom-arrow.ts

@@ -44,6 +44,7 @@ export const edgeCustomArrow: StaticTestCase = async (context) => {
         type: 'line', // 👈🏻 Edge shape type.
         color: '#F6BD16',
         labelText: (d: any) => d.id,
+        labelBackground: true,
         endArrow: true,
       },
     },

packages/g6/__tests__/demo/static/edge-line.ts

@@ -43,6 +43,7 @@ export const edgeLine: StaticTestCase = async (context) => {
       style: {
         type: 'line', // 👈🏻 Edge shape type.
         labelText: (d: any) => d.id,
+        labelBackground: true,
         endArrow: true,
       },
     },

packages/g6/__tests__/demo/static/edge-loop-curve.ts

@@ -81,6 +81,7 @@ export const edgeLoopCurve: StaticTestCase = async (context) => {
       style: {
         type: 'rect',
         size: [80, 30],
+        labelBackground: true,
         port: (d: any) => d.id.includes('ports'),
         portR: 3,
         ports: [

packages/g6/__tests__/demo/static/edge-quadratic.ts

@@ -43,6 +43,7 @@ export const edgeQuadratic: StaticTestCase = async (context) => {
       style: {
         type: 'quadratic', // 👈🏻 Edge shape type.
         labelText: (d: any) => d.id,
+        labelBackground: true,
         endArrow: true,
       },
     },

packages/g6/__tests__/demo/static/element-label-background.ts

@@ -48,6 +48,7 @@ export const elementLabelBackground: StaticTestCase = async (context) => {
         labelFill: '#e66465',
         labelFontSize: 12,
         labelFontStyle: 'italic',
+        labelBackground: true,
         labelBackgroundFill: '#eee',
         labelBackgroundStroke: '#9ec9ff',
         labelBackgroundRadius: 2,

packages/g6/__tests__/demo/static/element-label-oversized.ts

@@ -49,6 +49,7 @@ export const elementLabelOversized: StaticTestCase = async (context) => {
         labelPlacement: 'bottom',
         labelText: (d: any) => d.data.label,
         labelMaxWidth: '90%',
+        labelBackground: true,
         labelBackgroundFill: '#eee',
         labelBackgroundFillOpacity: 0.5,
         labelBackgroundRadius: 4,
@@ -62,6 +63,7 @@ export const elementLabelOversized: StaticTestCase = async (context) => {
         labelTextBaseline: 'bottom',
         labelText: (d: any) => d.data.label,
         labelMaxWidth: '80%',
+        labelBackground: true,
         labelBackgroundFill: 'red',
         labelBackgroundFillOpacity: 0.5,
         labelBackgroundRadius: 4,

packages/g6/__tests__/demo/static/graph-element.ts

@@ -12,8 +12,9 @@ export const graphElement: STDTestCase = async (context) => {
         { id: 'node-3', style: { x: 125, y: 150, parentId: 'combo-1', states: ['selected'] }, data: { value: 150 } },
       ],
       edges: [
-        { source: 'node-1', target: 'node-2', data: { weight: 250 } },
+        { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 250 } },
         {
+          id: 'edge-2',
           source: 'node-2',
           target: 'node-3',
           style: { lineWidth: 5, states: ['active', 'selected'] },
@@ -45,7 +46,7 @@ export const graphElement: STDTestCase = async (context) => {
           lineWidth: 4,
         },
       },
-      palette: { type: 'group', color: 'oranges', invert: true },
+      palette: { type: 'group', color: 'oranges', field: (d: any) => d.id, invert: true },
     },
     combo: {
       style: {},

packages/g6/__tests__/demo/static/node-circle.ts

@@ -26,7 +26,6 @@ export const nodeCircle: StaticTestCase = async (context) => {
       style: {
         type: 'circle', // 👈🏻 Node shape type.
         size: 40,
-        labelMaxWidth: 120,
         labelText: (d: any) => d.id,
         iconHeight: 20,
         iconWidth: 20,

packages/g6/__tests__/demo/static/node-diamond.ts

@@ -25,7 +25,6 @@ export const nodeDiamond: StaticTestCase = async (context) => {
       style: {
         type: 'diamond', // 👈🏻 Node shape type.
         size: 40,
-        labelMaxWidth: 120,
         labelText: (d: any) => d.id,
         iconWidth: 20,
         iconHeight: 20,

packages/g6/__tests__/demo/static/node-ellipse.ts

@@ -26,7 +26,6 @@ export const nodeEllipse: StaticTestCase = async (context) => {
       style: {
         type: 'ellipse', // 👈🏻 Node shape type.
         size: [45, 35],
-        labelMaxWidth: 120,
         labelText: (d: any) => d.id,
         iconHeight: 20,
         iconWidth: 20,

packages/g6/__tests__/demo/static/node-image.ts

@@ -26,7 +26,6 @@ export const nodeImage: StaticTestCase = async (context) => {
       style: {
         type: 'image', // 👈🏻 Node shape type.
         size: 40,
-        labelMaxWidth: 120,
         labelText: (d: any) => d.id,
         src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
         halo: (d: any) => d.id.includes('halo'),

packages/g6/__tests__/demo/static/node-rect.ts

@@ -27,7 +27,6 @@ export const nodeRect: StaticTestCase = async (context) => {
         type: 'rect', // 👈🏻 Node shape type.
         radius: 4, // 👈🏻 Set the radius.
         size: 40,
-        labelMaxWidth: 120,
         labelText: (d: any) => d.id,
         iconWidth: 20,
         iconHeight: 20,

packages/g6/__tests__/demo/static/node-star.ts

@@ -26,7 +26,6 @@ export const nodeStar: StaticTestCase = async (context) => {
       style: {
         type: 'star', // 👈🏻 Node shape type.
         size: 40,
-        labelMaxWidth: 120,
         labelText: (d: any) => d.id,
         iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
         halo: (d: any) => d.id.includes('halo'),

packages/g6/__tests__/demo/static/node-triangle.ts

@@ -26,7 +26,6 @@ export const nodeTriangle: StaticTestCase = async (context) => {
         type: 'triangle', // 👈🏻 Node shape type.
         size: 40,
         direction: (d: any) => d.data?.direction,
-        labelMaxWidth: 120,
         labelText: (d: any) => d.id,
         iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
         halo: (d: any) => d.id.includes('halo'),

packages/g6/__tests__/integration/snapshots/animation/controller-element-1000(3_3).svg

@@ -49,13 +49,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,128,0,1)"
               r="10"
+              stroke="rgba(0,128,0,1)"
             />
           </g>
         </g>
@@ -63,12 +62,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -81,8 +78,6 @@
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -95,8 +90,6 @@
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -109,8 +102,6 @@
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>

packages/g6/__tests__/integration/snapshots/animation/controller-element-200(2_3).svg

@@ -117,12 +117,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
               opacity="0.37293273049835485"
             />
@@ -132,13 +130,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,80,0,1)"
               r="10"
+              stroke="rgba(0,128,0,1)"
             />
           </g>
         </g>
@@ -146,12 +143,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -164,8 +159,6 @@
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
               opacity="0.6270672695016452"
             />
@@ -179,8 +172,6 @@
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
               opacity="0.6270672695016452"
             />
@@ -194,8 +185,6 @@
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
               opacity="0.6270672695016452"
             />

packages/g6/__tests__/integration/snapshots/animation/controller-element-50(1_3).svg

@@ -117,12 +117,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
               opacity="0.8255817601983712"
             />
@@ -132,13 +130,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,22,0,1)"
               r="10"
+              stroke="rgba(0,128,0,1)"
             />
           </g>
         </g>
@@ -146,12 +143,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -164,8 +159,6 @@
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
               opacity="0.17441823980162885"
             />
@@ -179,8 +172,6 @@
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
               opacity="0.17441823980162885"
             />
@@ -194,8 +185,6 @@
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
               opacity="0.17441823980162885"
             />

packages/g6/__tests__/integration/snapshots/animation/controller-element-position-0(1_3).svg

@@ -305,12 +305,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -319,12 +317,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -333,12 +329,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -347,12 +341,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -361,12 +353,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -375,12 +365,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>

packages/g6/__tests__/integration/snapshots/animation/controller-element-position-1000(3_3).svg

@@ -305,12 +305,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -319,12 +317,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -333,12 +329,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -347,12 +341,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -361,12 +353,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -375,12 +365,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>

packages/g6/__tests__/integration/snapshots/animation/controller-element-position-200(2_3).svg

@@ -305,12 +305,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -319,12 +317,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -333,12 +329,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -351,12 +345,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -365,12 +357,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -383,12 +373,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>

packages/g6/__tests__/integration/snapshots/animation/controller-element-state-0(1_2).svg

@@ -154,8 +154,8 @@
               cx="10"
               cy="10"
               stroke-width="12"
-              stroke="rgba(34,126,255,1)"
               r="10"
+              stroke="rgba(23,131,255,1)"
               stroke-dasharray="0,0"
               stroke-opacity="0.25"
               pointer-events="none"
@@ -164,12 +164,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
               stroke-width="1"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -183,8 +182,8 @@
               cx="10"
               cy="10"
               stroke-width="12"
-              stroke="rgba(34,126,255,1)"
               r="10"
+              stroke="rgba(23,131,255,1)"
               stroke-dasharray="0,0"
               stroke-opacity="0.25"
               pointer-events="none"
@@ -193,13 +192,13 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
               stroke-width="2"
-              stroke="rgba(0,0,0,1)"
               r="10"
+              stroke="rgba(0,0,0,1)"
             />
           </g>
         </g>

packages/g6/__tests__/integration/snapshots/animation/controller-element-state-1000(2_2).svg

@@ -135,7 +135,7 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
@@ -154,8 +154,8 @@
               cx="10"
               cy="10"
               stroke-width="12"
-              stroke="rgba(34,126,255,1)"
               r="10"
+              stroke="rgba(23,131,255,1)"
               stroke-dasharray="0,0"
               stroke-opacity="0.25"
               pointer-events="none"
@@ -164,12 +164,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
               stroke-width="2"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -183,8 +182,8 @@
               cx="10"
               cy="10"
               stroke-width="12"
-              stroke="rgba(255,192,203,1)"
               r="10"
+              stroke="rgba(255,192,203,1)"
               stroke-dasharray="0,0"
               stroke-opacity="0.25"
               pointer-events="none"
@@ -198,8 +197,8 @@
               cx="10"
               cy="10"
               stroke-width="3"
-              stroke="rgba(0,0,0,1)"
               r="10"
+              stroke="rgba(0,0,0,1)"
             />
           </g>
         </g>

packages/g6/__tests__/integration/snapshots/animation/edge-cubic-0(1_3).svg

@@ -20,20 +20,20 @@
           <path
             id="key"
             fill="none"
-            d="M 0,0.2074350425709781 C 107.27606875108998 -3.89683996178897,92.72393124891002 54.311710046930926,200 50.20743504257098 L 194.00438643810472,50.43682121568835"
+            d="M 0,0.2074350425709781 C 107.27606875108998 -3.89683996178897,92.72393124891002 54.311710046930926,200 50.20743504257098 L 195.00365536508727,50.398590186835456"
             stroke-width="2"
             stroke="rgba(24,144,255,1)"
           />
-          <g transform="matrix(-0.999269,0.038231,-0.038231,-0.999269,194.004379,50.436821)">
+          <g transform="matrix(-0.999269,0.038231,-0.038231,-0.999269,195.003662,50.398590)">
             <path
               id="g-svg-12"
               fill="rgba(24,144,255,1)"
-              d="M 0,5 L 10,0 L 10,10 Z"
-              transform="translate(-5,-5)"
+              d="M 0,4 L 8,0 L 8,8 Z"
+              transform="translate(-4,-4)"
               stroke-width="1"
               stroke="rgba(24,144,255,1)"
-              width="10"
-              height="10"
+              width="8"
+              height="8"
               stroke-dasharray="0,0"
             />
           </g>

packages/g6/__tests__/integration/snapshots/animation/edge-cubic-1000(3_3).svg

@@ -20,20 +20,20 @@
           <path
             id="key"
             fill="none"
-            d="M 0,0 C 204.76833630141005 47.90541147253245,145.23166369858995 152.09458852746758,350 200 L 344.1577500794001,198.63320964839141"
+            d="M 0,0 C 204.76833630141005 47.90541147253245,145.23166369858995 152.09458852746758,350 200 L 345.13145839950005,198.86100804032617"
             stroke-width="2"
             stroke="rgba(24,144,255,1)"
           />
-          <g transform="matrix(-0.973708,-0.227799,0.227799,-0.973708,344.157745,198.633209)">
+          <g transform="matrix(-0.973708,-0.227799,0.227799,-0.973708,345.131470,198.861008)">
             <path
               id="g-svg-12"
               fill="rgba(24,144,255,1)"
-              d="M 0,5 L 10,0 L 10,10 Z"
-              transform="translate(-5,-5)"
+              d="M 0,4 L 8,0 L 8,8 Z"
+              transform="translate(-4,-4)"
               stroke-width="1"
               stroke="rgba(24,144,255,1)"
-              width="10"
-              height="10"
+              width="8"
+              height="8"
               stroke-dasharray="0,0"
             />
           </g>

packages/g6/__tests__/integration/snapshots/animation/edge-cubic-500(2_3).svg

@@ -20,20 +20,20 @@
           <path
             id="key"
             fill="none"
-            d="M 0,0 C 156.02220252625 21.90056823408625,118.97779747375 103.09943176591378,275 125 L 269.05825037044286,124.1659668234072"
+            d="M 0,0 C 156.02220252625 21.90056823408625,118.97779747375 103.09943176591378,275 125 L 270.04854197536906,124.30497235283934"
             stroke-width="2"
             stroke="rgba(24,144,255,1)"
           />
-          <g transform="matrix(-0.990292,-0.139006,0.139006,-0.990292,269.058258,124.165970)">
+          <g transform="matrix(-0.990292,-0.139006,0.139006,-0.990292,270.048553,124.304970)">
             <path
               id="g-svg-12"
               fill="rgba(24,144,255,1)"
-              d="M 0,5 L 10,0 L 10,10 Z"
-              transform="translate(-5,-5)"
+              d="M 0,4 L 8,0 L 8,8 Z"
+              transform="translate(-4,-4)"
               stroke-width="1"
               stroke="rgba(24,144,255,1)"
-              width="10"
-              height="10"
+              width="8"
+              height="8"
               stroke-dasharray="0,0"
             />
           </g>

packages/g6/__tests__/integration/snapshots/animation/edge-line-0(1_3).svg

@@ -33,35 +33,35 @@
           <path
             id="key"
             fill="none"
-            d="M 5.820855000871991,1.4552137502179978 L 0,0 L 194.179144999128,48.544786249782"
+            d="M 4.85071250072666,1.212678125181665 L 0,0 L 195.14928749927333,48.78732187481833"
             stroke-width="2"
             stroke-dasharray="10,10"
             stroke="rgba(24,144,255,1)"
           />
-          <g transform="matrix(0.970143,0.242536,-0.242536,0.970143,5.820855,1.455214)">
+          <g transform="matrix(0.970143,0.242536,-0.242536,0.970143,4.850712,1.212678)">
             <path
               id="g-svg-12"
               fill="rgba(24,144,255,1)"
-              d="M 0,5 A 5 5 0 1 0 10 5 A 5 5 0 1 0 0 5 Z"
-              transform="translate(-5,-5)"
+              d="M 0,4 A 4 4 0 1 0 8 4 A 4 4 0 1 0 0 4 Z"
+              transform="translate(-4,-4)"
               stroke-width="1"
               stroke-dasharray="0,0"
               stroke="rgba(24,144,255,1)"
-              width="10"
-              height="10"
+              width="8"
+              height="8"
             />
           </g>
-          <g transform="matrix(-0.970143,-0.242536,0.242536,-0.970143,194.179138,48.544785)">
+          <g transform="matrix(-0.970143,-0.242536,0.242536,-0.970143,195.149292,48.787323)">
             <path
               id="g-svg-14"
               fill="rgba(255,0,0,1)"
-              d="M 0,5 L 10,0 L 10,10 Z"
-              transform="translate(-5,-5)"
+              d="M 0,4 L 8,0 L 8,8 Z"
+              transform="translate(-4,-4)"
               stroke-width="1"
               stroke-dasharray="0,0"
               stroke="rgba(24,144,255,1)"
-              width="10"
-              height="10"
+              width="8"
+              height="8"
             />
           </g>
         </g>

packages/g6/__tests__/integration/snapshots/animation/edge-line-1000(3_3).svg

@@ -33,35 +33,35 @@
           <path
             id="key"
             fill="none"
-            d="M 5.209458852746755,2.9768336301410026 L 0,0 L 344.79054114725324,197.02316636985898"
+            d="M 4.341215710622296,2.480694691784169 L 0,0 L 345.6587842893777,197.51930530821582"
             stroke-width="2"
             stroke-dasharray="10,10"
             stroke="rgba(24,144,255,1)"
           />
-          <g transform="matrix(0.868243,0.496139,-0.496139,0.868243,5.209459,2.976834)">
+          <g transform="matrix(0.868243,0.496139,-0.496139,0.868243,4.341216,2.480695)">
             <path
               id="g-svg-12"
               fill="rgba(24,144,255,1)"
-              d="M 0,5 A 5 5 0 1 0 10 5 A 5 5 0 1 0 0 5 Z"
-              transform="translate(-5,-5)"
+              d="M 0,4 A 4 4 0 1 0 8 4 A 4 4 0 1 0 0 4 Z"
+              transform="translate(-4,-4)"
               stroke-width="1"
               stroke-dasharray="0,0"
               stroke="rgba(24,144,255,1)"
-              width="10"
-              height="10"
+              width="8"
+              height="8"
             />
           </g>
-          <g transform="matrix(-0.868243,-0.496139,0.496139,-0.868243,344.790527,197.023163)">
+          <g transform="matrix(-0.868243,-0.496139,0.496139,-0.868243,345.658783,197.519302)">
             <path
               id="g-svg-14"
               fill="rgba(255,0,0,1)"
-              d="M 0,5 L 10,0 L 10,10 Z"
-              transform="translate(-5,-5)"
+              d="M 0,4 L 8,0 L 8,8 Z"
+              transform="translate(-4,-4)"
               stroke-width="1"
               stroke-dasharray="0,0"
               stroke="rgba(24,144,255,1)"
-              width="10"
-              height="10"
+              width="8"
+              height="8"
             />
           </g>
         </g>

packages/g6/__tests__/integration/snapshots/animation/edge-line-500(2_3).svg

@@ -33,35 +33,35 @@
           <path
             id="key"
             fill="none"
-            d="M 5.462198864775629,2.482817665807104 L 0,0 C 137.5 62.5,275 125,275 125 L 269.53780113522436,122.5171823341929"
+            d="M 4.5518323873130235,2.06901472150592 L 0,0 C 137.5 62.5,275 125,275 125 L 270.448167612687,122.93098527849408"
             stroke-width="2"
             stroke-dasharray="10,10"
             stroke="rgba(24,144,255,1)"
           />
-          <g transform="matrix(0.910366,0.413803,-0.413803,0.910366,5.462199,2.482818)">
+          <g transform="matrix(0.910366,0.413803,-0.413803,0.910366,4.551832,2.069015)">
             <path
               id="g-svg-12"
               fill="rgba(24,144,255,1)"
-              d="M 0,5 A 5 5 0 1 0 10 5 A 5 5 0 1 0 0 5 Z"
-              transform="translate(-5,-5)"
+              d="M 0,4 A 4 4 0 1 0 8 4 A 4 4 0 1 0 0 4 Z"
+              transform="translate(-4,-4)"
               stroke-width="1"
               stroke-dasharray="0,0"
               stroke="rgba(24,144,255,1)"
-              width="10"
-              height="10"
+              width="8"
+              height="8"
             />
           </g>
-          <g transform="matrix(-0.910366,-0.413803,0.413803,-0.910366,269.537811,122.517181)">
+          <g transform="matrix(-0.910366,-0.413803,0.413803,-0.910366,270.448181,122.930984)">
             <path
               id="g-svg-14"
               fill="rgba(255,0,0,1)"
-              d="M 0,5 L 10,0 L 10,10 Z"
-              transform="translate(-5,-5)"
+              d="M 0,4 L 8,0 L 8,8 Z"
+              transform="translate(-4,-4)"
               stroke-width="1"
               stroke-dasharray="0,0"
               stroke="rgba(24,144,255,1)"
-              width="10"
-              height="10"
+              width="8"
+              height="8"
             />
           </g>
         </g>

packages/g6/__tests__/integration/snapshots/animation/edge-quadratic-0(1_3).svg

@@ -20,20 +20,20 @@
           <path
             id="key"
             fill="none"
-            d="M 0,0.2893917355592919 Q 107.27606875108998 -3.8148832688006564,200 50.28939173555929 L 194.81769917391233,47.265526965446185"
+            d="M 0,0.2893917355592919 Q 107.27606875108998 -3.8148832688006564,200 50.28939173555929 L 195.68141597826028,47.76950442713171"
             stroke-width="2"
             stroke="rgba(24,144,255,1)"
           />
-          <g transform="matrix(-0.863717,-0.503978,0.503978,-0.863717,194.817703,47.265526)">
+          <g transform="matrix(-0.863717,-0.503978,0.503978,-0.863717,195.681412,47.769505)">
             <path
               id="g-svg-12"
               fill="rgba(24,144,255,1)"
-              d="M 0,5 L 10,0 L 10,10 Z"
-              transform="translate(-5,-5)"
+              d="M 0,4 L 8,0 L 8,8 Z"
+              transform="translate(-4,-4)"
               stroke-width="1"
               stroke="rgba(24,144,255,1)"
-              width="10"
-              height="10"
+              width="8"
+              height="8"
               stroke-dasharray="0,0"
             />
           </g>

packages/g6/__tests__/integration/snapshots/animation/edge-quadratic-1000(3_3).svg

@@ -20,20 +20,20 @@
           <path
             id="key"
             fill="none"
-            d="M 0,0 Q 189.88416815070502 73.95270573626621,350 200 L 345.28555356381315,196.28866670853654"
+            d="M 0,0 Q 189.88416815070502 73.95270573626621,350 200 L 346.07129463651097,196.90722225711377"
             stroke-width="2"
             stroke="rgba(24,144,255,1)"
           />
-          <g transform="matrix(-0.785741,-0.618555,0.618555,-0.785741,345.285553,196.288666)">
+          <g transform="matrix(-0.785741,-0.618555,0.618555,-0.785741,346.071289,196.907227)">
             <path
               id="g-svg-12"
               fill="rgba(24,144,255,1)"
-              d="M 0,5 L 10,0 L 10,10 Z"
-              transform="translate(-5,-5)"
+              d="M 0,4 L 8,0 L 8,8 Z"
+              transform="translate(-4,-4)"
               stroke-width="1"
               stroke="rgba(24,144,255,1)"
-              width="10"
-              height="10"
+              width="8"
+              height="8"
               stroke-dasharray="0,0"
             />
           </g>

packages/g6/__tests__/integration/snapshots/animation/edge-quadratic-500(2_3).svg

@@ -20,20 +20,20 @@
           <path
             id="key"
             fill="none"
-            d="M 0,0 C 99.05341230059832 23.282810243968754,190.72007896726495 64.94947691063538,275 125 L 270.11350503429605,121.51830975672016"
+            d="M 0,0 C 99.05341230059832 23.282810243968754,190.72007896726495 64.94947691063538,275 125 L 270.9279208619134,122.09859146393347"
             stroke-width="2"
             stroke="rgba(24,144,255,1)"
           />
-          <g transform="matrix(-0.814416,-0.580282,0.580282,-0.814416,270.113495,121.518311)">
+          <g transform="matrix(-0.814416,-0.580282,0.580282,-0.814416,270.927917,122.098595)">
             <path
               id="g-svg-12"
               fill="rgba(24,144,255,1)"
-              d="M 0,5 L 10,0 L 10,10 Z"
-              transform="translate(-5,-5)"
+              d="M 0,4 L 8,0 L 8,8 Z"
+              transform="translate(-4,-4)"
               stroke-width="1"
               stroke="rgba(24,144,255,1)"
-              width="10"
-              height="10"
+              width="8"
+              height="8"
               stroke-dasharray="0,0"
             />
           </g>

packages/g6/__tests__/integration/snapshots/static/controller-element-position.svg

@@ -305,12 +305,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -319,12 +317,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -333,12 +329,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -347,12 +341,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -361,12 +353,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -375,12 +365,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>

packages/g6/__tests__/integration/snapshots/static/controller-element-visibility.svg

@@ -115,12 +115,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -129,12 +127,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -143,12 +139,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               opacity="0.5"
               r="10"
             />

packages/g6/__tests__/integration/snapshots/static/controller-element-z-index.svg

@@ -20,8 +20,6 @@
               transform="translate(-25,-25)"
               cx="25"
               cy="25"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="25"
             />
           </g>
@@ -34,8 +32,6 @@
               transform="translate(-25,-25)"
               cx="25"
               cy="25"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="25"
             />
           </g>
@@ -48,8 +44,6 @@
               transform="translate(-25,-25)"
               cx="25"
               cy="25"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="25"
             />
           </g>

packages/g6/__tests__/integration/snapshots/static/controller-element.svg

@@ -113,12 +113,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -127,12 +125,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -141,12 +137,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>

packages/g6/__tests__/integration/snapshots/static/controller-layout-circular.svg

@@ -2065,12 +2065,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2083,12 +2081,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2101,12 +2097,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2119,12 +2113,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2137,12 +2129,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2155,12 +2145,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2173,12 +2161,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2191,12 +2177,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2205,12 +2189,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2223,12 +2205,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2241,12 +2221,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2259,12 +2237,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2277,12 +2253,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2295,12 +2269,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2313,12 +2285,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2331,12 +2301,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2345,12 +2313,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2363,12 +2329,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2381,12 +2345,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2399,12 +2361,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2417,12 +2377,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2435,12 +2393,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2453,12 +2409,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2471,12 +2425,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2485,12 +2437,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2503,12 +2453,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2521,12 +2469,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2539,12 +2485,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2557,12 +2501,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2575,12 +2517,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2593,12 +2533,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2611,12 +2549,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>

packages/g6/__tests__/integration/snapshots/static/controller-layout-compact-box.svg

@@ -981,27 +981,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 108.4,0 l 0,23 l-108.4 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="108.4"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1021,27 +1008,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 78.88,0 l 0,23 l-78.88 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="78.88"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1065,27 +1039,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 111.40000000000002,0 l 0,23 l-111.40000000000002 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="111.40000000000002"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1109,27 +1070,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 161.20000000000002,0 l 0,23 l-161.20000000000002 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="161.20000000000002"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1149,27 +1097,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 32.8,0 l 0,23 l-32.8 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="32.8"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1189,27 +1124,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 83.92,0 l 0,23 l-83.92 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="83.92"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1229,27 +1151,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 71.67999999999999,0 l 0,23 l-71.67999999999999 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="71.67999999999999"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1273,27 +1182,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 110.91999999999999,0 l 0,23 l-110.91999999999999 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="110.91999999999999"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1317,27 +1213,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 162.4,0 l 0,23 l-162.4 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="162.4"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1361,27 +1244,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 139.72000000000003,0 l 0,23 l-139.72000000000003 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="139.72000000000003"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1401,27 +1271,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 64.96000000000001,0 l 0,23 l-64.96000000000001 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="64.96000000000001"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1445,27 +1302,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 96.16000000000001,0 l 0,23 l-96.16000000000001 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="96.16000000000001"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1489,27 +1333,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 131.68000000000004,0 l 0,23 l-131.68000000000004 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="131.68000000000004"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1533,27 +1364,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 163.12,0 l 0,23 l-163.12 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="163.12"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1577,27 +1395,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 132.52,0 l 0,23 l-132.52 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="132.52"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1621,27 +1426,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 162.88,0 l 0,23 l-162.88 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="162.88"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1665,27 +1457,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 127.72000000000003,0 l 0,23 l-127.72000000000003 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="127.72000000000003"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1709,27 +1488,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 125.2,0 l 0,23 l-125.2 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="125.2"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1749,27 +1515,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 51.64,0 l 0,23 l-51.64 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="51.64"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1793,27 +1546,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 110.8,0 l 0,23 l-110.8 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="110.8"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1837,27 +1577,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 94,0 l 0,23 l-94 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="94"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1877,27 +1604,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 52.48000000000001,0 l 0,23 l-52.48000000000001 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="52.48000000000001"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1917,27 +1631,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 48.4,0 l 0,23 l-48.4 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="48.4"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1957,27 +1658,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 52.239999999999995,0 l 0,23 l-52.239999999999995 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="52.239999999999995"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1997,27 +1685,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 57.040000000000006,0 l 0,23 l-57.040000000000006 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="57.040000000000006"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -2037,27 +1712,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 65.56,0 l 0,23 l-65.56 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="65.56"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -2081,27 +1743,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 147.15999999999994,0 l 0,23 l-147.15999999999994 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="147.15999999999994"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -2125,27 +1774,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 118.47999999999999,0 l 0,23 l-118.47999999999999 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="118.47999999999999"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -2169,27 +1805,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 230.67999999999995,0 l 0,23 l-230.67999999999995 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="230.67999999999995"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -2213,27 +1836,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 199.95999999999998,0 l 0,23 l-199.95999999999998 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="199.95999999999998"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -2257,27 +1867,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 152.31999999999996,0 l 0,23 l-152.31999999999996 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="152.31999999999996"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"

packages/g6/__tests__/integration/snapshots/static/controller-layout-d3-force.svg

@@ -2069,12 +2069,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2087,12 +2085,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2105,12 +2101,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2123,12 +2117,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2141,12 +2133,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2159,12 +2149,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2177,12 +2165,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2195,12 +2181,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2213,12 +2197,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2231,12 +2213,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2249,12 +2229,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2267,12 +2245,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2285,12 +2261,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2303,12 +2277,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2321,12 +2293,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2339,12 +2309,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2357,12 +2325,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2375,12 +2341,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2393,12 +2357,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2411,12 +2373,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2429,12 +2389,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2447,12 +2405,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2465,12 +2421,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2483,12 +2437,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2501,12 +2453,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2519,12 +2469,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2537,12 +2485,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2555,12 +2501,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2573,12 +2517,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2591,12 +2533,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2609,12 +2549,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2627,12 +2565,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>

packages/g6/__tests__/integration/snapshots/static/controller-layout-dagre.svg

@@ -401,12 +401,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -415,12 +413,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -429,12 +425,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -443,12 +437,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -457,12 +449,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -471,12 +461,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -485,12 +473,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -499,12 +485,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -513,12 +497,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -527,12 +509,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>

packages/g6/__tests__/integration/snapshots/static/controller-layout-dendrogram.svg

@@ -981,27 +981,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 108.4,0 l 0,23 l-108.4 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="108.4"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1021,27 +1008,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 78.88,0 l 0,23 l-78.88 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="78.88"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1065,27 +1039,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 111.40000000000002,0 l 0,23 l-111.40000000000002 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="111.40000000000002"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1109,27 +1070,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 161.20000000000002,0 l 0,23 l-161.20000000000002 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="161.20000000000002"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1149,27 +1097,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 32.8,0 l 0,23 l-32.8 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="32.8"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1189,27 +1124,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 83.92,0 l 0,23 l-83.92 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="83.92"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1229,27 +1151,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 71.67999999999999,0 l 0,23 l-71.67999999999999 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="71.67999999999999"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1273,27 +1182,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 110.91999999999999,0 l 0,23 l-110.91999999999999 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="110.91999999999999"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1317,27 +1213,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 162.4,0 l 0,23 l-162.4 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="162.4"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1361,27 +1244,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 139.72000000000003,0 l 0,23 l-139.72000000000003 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="139.72000000000003"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1401,27 +1271,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 64.96000000000001,0 l 0,23 l-64.96000000000001 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="64.96000000000001"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1445,27 +1302,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 96.16000000000001,0 l 0,23 l-96.16000000000001 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="96.16000000000001"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1489,27 +1333,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 131.68000000000004,0 l 0,23 l-131.68000000000004 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="131.68000000000004"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1533,27 +1364,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 163.12,0 l 0,23 l-163.12 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="163.12"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1577,27 +1395,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 132.52,0 l 0,23 l-132.52 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="132.52"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1621,27 +1426,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 162.88,0 l 0,23 l-162.88 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="162.88"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1665,27 +1457,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 127.72000000000003,0 l 0,23 l-127.72000000000003 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="127.72000000000003"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1709,27 +1488,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 125.2,0 l 0,23 l-125.2 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="125.2"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1749,27 +1515,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 51.64,0 l 0,23 l-51.64 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="51.64"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1793,27 +1546,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 110.8,0 l 0,23 l-110.8 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="110.8"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1837,27 +1577,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 94,0 l 0,23 l-94 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="94"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1877,27 +1604,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 52.48000000000001,0 l 0,23 l-52.48000000000001 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="52.48000000000001"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1917,27 +1631,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 48.4,0 l 0,23 l-48.4 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="48.4"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1957,27 +1658,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 52.239999999999995,0 l 0,23 l-52.239999999999995 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="52.239999999999995"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -1997,27 +1685,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 57.040000000000006,0 l 0,23 l-57.040000000000006 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="57.040000000000006"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -2037,27 +1712,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 65.56,0 l 0,23 l-65.56 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="65.56"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -2081,27 +1743,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 147.15999999999994,0 l 0,23 l-147.15999999999994 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="147.15999999999994"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -2125,27 +1774,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 118.47999999999999,0 l 0,23 l-118.47999999999999 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="118.47999999999999"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -2169,27 +1805,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 195.15999999999997,0 l 0,23 l-195.15999999999997 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="195.15999999999997"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -2200,7 +1823,7 @@
                 font-size="12"
                 text-anchor="left"
               >
-                Multi-layer feed forward neural ...
+                Multi-layer feed forward neural network
               </text>
             </g>
           </g>
@@ -2213,27 +1836,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 199.95999999999998,0 l 0,23 l-199.95999999999998 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="199.95999999999998"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -2257,27 +1867,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,10,0)">
-            <g transform="matrix(1,0,0,1,0,-11.500000)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 152.31999999999996,0 l 0,23 l-152.31999999999996 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="152.31999999999996"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"

packages/g6/__tests__/integration/snapshots/static/controller-layout-grid.svg

@@ -2069,12 +2069,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2087,12 +2085,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2105,12 +2101,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2119,12 +2113,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2133,12 +2125,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2151,12 +2141,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2165,12 +2153,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2179,12 +2165,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2197,12 +2181,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2215,12 +2197,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2233,12 +2213,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2247,12 +2225,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2265,12 +2241,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2283,12 +2257,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2297,12 +2269,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2315,12 +2285,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2333,12 +2301,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2351,12 +2317,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2365,12 +2329,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2379,12 +2341,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2393,12 +2353,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2407,12 +2365,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2421,12 +2377,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2439,12 +2393,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2453,12 +2405,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2467,12 +2417,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2485,12 +2433,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2503,12 +2449,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2517,12 +2461,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2535,12 +2477,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2549,12 +2489,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2563,12 +2501,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>

packages/g6/__tests__/integration/snapshots/static/controller-layout-indented.svg

@@ -596,12 +596,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -610,12 +608,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -624,12 +620,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -638,12 +632,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -652,12 +644,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -666,12 +656,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -680,12 +668,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -694,12 +680,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -708,12 +692,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -722,12 +704,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -736,12 +716,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -750,12 +728,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -764,12 +740,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -778,12 +752,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -792,12 +764,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -806,12 +776,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -820,12 +788,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -834,12 +800,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -848,12 +812,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>

packages/g6/__tests__/integration/snapshots/static/controller-layout-mindmap.svg

@@ -981,12 +981,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -999,12 +997,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1017,12 +1013,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1035,12 +1029,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1049,12 +1041,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1067,12 +1057,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1085,12 +1073,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1103,12 +1089,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1121,12 +1105,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1139,12 +1121,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1153,12 +1133,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1171,12 +1149,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1189,12 +1165,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1207,12 +1181,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1225,12 +1197,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1243,12 +1213,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1261,12 +1229,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1279,12 +1245,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1293,12 +1257,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1311,12 +1273,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1329,12 +1289,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1343,12 +1301,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1357,12 +1313,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1371,12 +1325,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1385,12 +1337,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1399,12 +1349,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1417,12 +1365,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1435,12 +1381,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1453,12 +1397,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1471,12 +1413,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1489,12 +1429,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>

packages/g6/__tests__/integration/snapshots/static/controller-layout-radial.svg

@@ -1873,12 +1873,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1887,12 +1885,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1901,12 +1897,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1915,12 +1909,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1929,12 +1921,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1943,12 +1933,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1957,12 +1945,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1971,12 +1957,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1985,12 +1969,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1999,12 +1981,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2017,12 +1997,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2035,12 +2013,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2053,12 +2029,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2071,12 +2045,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2089,12 +2061,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2107,12 +2077,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2125,12 +2093,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2143,12 +2109,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2161,12 +2125,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2179,12 +2141,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2197,12 +2157,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2215,12 +2173,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2233,12 +2189,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2251,12 +2205,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2269,12 +2221,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2283,12 +2233,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2301,12 +2249,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2315,12 +2261,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2333,12 +2277,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2347,12 +2289,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2365,12 +2305,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2383,12 +2321,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2401,12 +2337,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2419,12 +2353,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>

packages/g6/__tests__/integration/snapshots/static/controller-viewport.svg

@@ -26,18 +26,18 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,211.313705,211.313705)">
+          <g transform="matrix(1,0,0,1,208.485275,208.485275)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 77.3725830020305,77.3725830020305"
+              d="M 0,0 L 83.02943725152284,83.02943725152284"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 77.3725830020305,77.3725830020305"
+              d="M 0,0 L 83.02943725152284,83.02943725152284"
               stroke-width="3"
               stroke="transparent"
             />
@@ -49,13 +49,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -63,13 +61,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>

packages/g6/__tests__/integration/snapshots/static/edge-arrow.svg

@@ -26,11 +26,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,141,31.250000)">
+          <g transform="matrix(1,0,0,1,137,31.250000)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 212,2.8179255993120893e-15"
+              d="M 0,0 L 221,6.123233995736766e-16"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
@@ -41,27 +41,27 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(-1,-0,0,-1,212,0)">
+            <g transform="matrix(-1,0,-0,-1,221,0)">
               <path
                 id="g-svg-43"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-43"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -108,11 +108,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,141,93.750000)">
+          <g transform="matrix(1,0,0,1,137,93.750000)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 212,7.347880794884119e-16"
+              d="M 0,0 L 221,6.123233995736766e-16"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
@@ -123,27 +123,27 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(-1,0,-0,-1,212,0)">
+            <g transform="matrix(-1,0,-0,-1,221,0)">
               <path
                 id="g-svg-50"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-50"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -190,11 +190,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,141,156.250000)">
+          <g transform="matrix(1,0,0,1,137,156.250000)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 212,7.347880794884119e-16"
+              d="M 0,0 L 221,6.123233995736766e-16"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
@@ -205,27 +205,27 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(-1,0,-0,-1,212,0)">
+            <g transform="matrix(-1,0,-0,-1,221,0)">
               <path
                 id="g-svg-57"
                 fill="none"
-                d="M 10,0 L 0,5 L 10,10"
-                transform="translate(-5,-5)"
+                d="M 8,0 L 0,4 L 8,8"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-57"
                 fill="none"
-                d="M 10,0 L 0,5 L 10,10"
-                transform="translate(-5,-5)"
+                d="M 8,0 L 0,4 L 8,8"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -272,11 +272,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,141,218.750000)">
+          <g transform="matrix(1,0,0,1,137,218.750000)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 212,7.347880794884119e-16"
+              d="M 0,0 L 221,6.123233995736766e-16"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
@@ -287,27 +287,27 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(-1,0,-0,-1,212,0)">
+            <g transform="matrix(-1,0,-0,-1,221,0)">
               <path
                 id="g-svg-64"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 6.666666666666667,5 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 5.333333333333333,4 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-64"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 6.666666666666667,5 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 5.333333333333333,4 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -354,11 +354,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,141,281.250000)">
+          <g transform="matrix(1,0,0,1,137,281.250000)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 212,7.347880794884119e-16"
+              d="M 0,0 L 221,6.123233995736766e-16"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
@@ -369,27 +369,27 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(-1,0,-0,-1,212,0)">
+            <g transform="matrix(-1,0,-0,-1,221,0)">
               <path
                 id="g-svg-71"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 A 5 5 0 1 0 10 5 A 5 5 0 1 0 0 5 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 A 4 4 0 1 0 8 4 A 4 4 0 1 0 0 4 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-71"
                 fill="transparent"
-                d="M 0,5 A 5 5 0 1 0 10 5 A 5 5 0 1 0 0 5 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 A 4 4 0 1 0 8 4 A 4 4 0 1 0 0 4 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -436,11 +436,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,141,343.750000)">
+          <g transform="matrix(1,0,0,1,137,343.750000)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 212,7.347880794884119e-16"
+              d="M 0,0 L 221,6.123233995736766e-16"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
@@ -451,27 +451,27 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(-1,0,-0,-1,212,0)">
+            <g transform="matrix(-1,0,-0,-1,221,0)">
               <path
                 id="g-svg-78"
                 fill="rgba(153,173,209,1)"
-                d="M 0,0 L 10,0 L 10,10 L 0,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,0 L 8,0 L 8,8 L 0,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-78"
                 fill="transparent"
-                d="M 0,0 L 10,0 L 10,10 L 0,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,0 L 8,0 L 8,8 L 0,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -518,11 +518,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,141,406.250000)">
+          <g transform="matrix(1,0,0,1,137,406.250000)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 212,7.347880794884119e-16"
+              d="M 0,0 L 221,6.123233995736766e-16"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
@@ -533,27 +533,27 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(-1,0,-0,-1,212,0)">
+            <g transform="matrix(-1,0,-0,-1,221,0)">
               <path
                 id="g-svg-85"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 5,0 L 10,5 L 5,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 4,0 L 8,4 L 4,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-85"
                 fill="transparent"
-                d="M 0,5 L 5,0 L 10,5 L 5,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 4,0 L 8,4 L 4,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -600,11 +600,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,141,468.750000)">
+          <g transform="matrix(1,0,0,1,137,468.750000)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 212,7.347880794884119e-16"
+              d="M 0,0 L 221,6.123233995736766e-16"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
@@ -615,27 +615,27 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(-1,0,-0,-1,212,0)">
+            <g transform="matrix(-1,0,-0,-1,221,0)">
               <path
                 id="g-svg-92"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 5,0 L 5,10 Z M 8.571428571428571,0 L 10,0 L 10,10 L 8.571428571428571,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 4,0 L 4,8 Z M 6.857142857142858,0 L 8,0 L 8,8 L 6.857142857142858,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-92"
                 fill="transparent"
-                d="M 0,5 L 5,0 L 5,10 Z M 8.571428571428571,0 L 10,0 L 10,10 L 8.571428571428571,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 4,0 L 4,8 Z M 6.857142857142858,0 L 8,0 L 8,8 L 6.857142857142858,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -673,13 +673,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -687,13 +685,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -701,13 +697,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -715,13 +709,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -729,13 +721,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -743,13 +733,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -757,13 +745,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -771,13 +757,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -785,13 +769,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -799,13 +781,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -813,13 +793,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -827,13 +805,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -841,13 +817,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -855,13 +829,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -869,13 +841,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -883,13 +853,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>

packages/g6/__tests__/integration/snapshots/static/edge-cubic-horizontal.svg

@@ -26,11 +26,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,66,50)">
+          <g transform="matrix(1,0,0,1,62,50)">
             <path
               id="key"
               fill="none"
-              d="M 0,244 C 150 244,150 0,300 0 L 294,7.347880794884119e-16"
+              d="M 0,228 C 150 228,150 0,300 0 L 295,6.123233995736766e-16"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
@@ -41,27 +41,27 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(-1,0,-0,-1,294,0)">
+            <g transform="matrix(-1,0,-0,-1,295,0)">
               <path
                 id="g-svg-23"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-23"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -69,7 +69,7 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.533866,-0.845569,0.845569,0.533866,218.135468,168.617722)"
+            transform="matrix(0.559859,-0.828588,0.828588,0.559859,214.239441,160.685654)"
           >
             <g transform="matrix(1,0,0,1,-33.360001,-11.500000)">
               <path
@@ -112,11 +112,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,66,172)">
+          <g transform="matrix(1,0,0,1,62,164)">
             <path
               id="halo"
               fill="none"
-              d="M 0,122 C 150 122,150 0,300 0"
+              d="M 0,114 C 150 114,150 0,300 0"
               stroke-width="12"
               stroke="rgba(153,173,209,1)"
               stroke-dasharray="0,0"
@@ -126,7 +126,7 @@
             <path
               id="halo"
               fill="none"
-              d="M 0,122 C 150 122,150 0,300 0"
+              d="M 0,114 C 150 114,150 0,300 0"
               stroke-width="14"
               stroke="transparent"
               stroke-dasharray="0,0"
@@ -134,11 +134,11 @@
               stroke-opacity="0.25"
             />
           </g>
-          <g transform="matrix(1,0,0,1,66,172)">
+          <g transform="matrix(1,0,0,1,62,164)">
             <path
               id="key"
               fill="none"
-              d="M 0,122 C 150 122,150 0,300 0 L 294,7.347880794884119e-16"
+              d="M 0,114 C 150 114,150 0,300 0 L 295,6.123233995736766e-16"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
@@ -149,27 +149,27 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(-1,0,-0,-1,294,0)">
+            <g transform="matrix(-1,0,-0,-1,295,0)">
               <path
                 id="g-svg-30"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-30"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -177,7 +177,7 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.783945,-0.620830,0.620830,0.783945,219.135773,230.516678)"
+            transform="matrix(0.803842,-0.594843,0.594843,0.803842,215.215363,218.620636)"
           >
             <g transform="matrix(1,0,0,1,-30.480000,-11.500000)">
               <path
@@ -220,7 +220,7 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,66,294)">
+          <g transform="matrix(1,0,0,1,62,278)">
             <path
               id="halo"
               fill="none"
@@ -242,11 +242,11 @@
               stroke-opacity="0.25"
             />
           </g>
-          <g transform="matrix(1,0,0,1,66,294)">
+          <g transform="matrix(1,0,0,1,62,278)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 C 150 0,150 0,300 0 L 294,7.347880794884119e-16"
+              d="M 0,0 C 150 0,150 0,300 0 L 295,6.123233995736766e-16"
               stroke-width="2"
               stroke="rgba(153,173,209,1)"
             />
@@ -257,32 +257,32 @@
               stroke-width="2"
               stroke="transparent"
             />
-            <g transform="matrix(-1,0,-0,-1,294,0)">
+            <g transform="matrix(-1,0,-0,-1,295,0)">
               <path
                 id="g-svg-37"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-37"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
           </g>
-          <g id="label" fill="none" transform="matrix(1,0,0,1,220,294)">
+          <g id="label" fill="none" transform="matrix(1,0,0,1,216,278)">
             <g transform="matrix(1,0,0,1,-44.099998,-13.500000)">
               <path
                 id="background"
@@ -325,11 +325,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,66,294)">
+          <g transform="matrix(1,0,0,1,62,278)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 C 150 0,150 122,300 122 L 294,122"
+              d="M 0,0 C 150 0,150 114,300 114 L 295,114"
               stroke-width="2"
               stroke="rgba(153,173,209,1)"
             />
@@ -340,27 +340,27 @@
               stroke-width="2"
               stroke="transparent"
             />
-            <g transform="matrix(-1,0,-0,-1,294,122)">
+            <g transform="matrix(-1,0,-0,-1,295,114)">
               <path
                 id="g-svg-44"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-44"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -368,7 +368,7 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.783943,0.620833,-0.620833,0.783943,219.135773,357.483337)"
+            transform="matrix(0.803840,0.594846,-0.594846,0.803840,215.215363,337.379395)"
           >
             <g transform="matrix(1,0,0,1,-38.279999,-11.500000)">
               <path
@@ -412,13 +412,14 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,66,294)">
+          <g transform="matrix(1,0,0,1,62,278)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 C 150 0,150 244,300 244 L 294,244"
+              d="M 0,0 C 150 0,150 228,300 228 L 295,228"
               stroke-width="1"
-              stroke="rgba(210,218,233,1)"
+              stroke="rgba(153,173,209,1)"
+              opacity="0.25"
             />
             <path
               id="key"
@@ -426,28 +427,29 @@
               d="M 0,0 C 0 0,0 0,0 0"
               stroke-width="3"
               stroke="transparent"
+              opacity="0.25"
             />
-            <g transform="matrix(-1,0,-0,-1,294,244)">
+            <g transform="matrix(-1,0,-0,-1,295,228)">
               <path
                 id="g-svg-51"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-51"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -455,7 +457,7 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.533864,0.845570,-0.845570,0.533864,218.135452,419.382294)"
+            transform="matrix(0.559860,0.828587,-0.828587,0.559860,214.239441,395.314362)"
           >
             <g transform="matrix(1,0,0,1,-35.639999,-11.500000)">
               <path
@@ -477,6 +479,7 @@
                 dx="0.5"
                 font-size="12"
                 text-anchor="middle"
+                opacity="0.25"
               >
                 line-inactive
               </text>
@@ -485,87 +488,75 @@
         </g>
       </g>
       <g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="node1" fill="none" transform="matrix(1,0,0,1,50,294)">
+        <g id="node1" fill="none" transform="matrix(1,0,0,1,50,278)">
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
-        <g id="node2" fill="none" transform="matrix(1,0,0,1,382,50)">
+        <g id="node2" fill="none" transform="matrix(1,0,0,1,374,50)">
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
-        <g id="node3" fill="none" transform="matrix(1,0,0,1,382,172)">
+        <g id="node3" fill="none" transform="matrix(1,0,0,1,374,164)">
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
-        <g id="node4" fill="none" transform="matrix(1,0,0,1,382,294)">
+        <g id="node4" fill="none" transform="matrix(1,0,0,1,374,278)">
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
-        <g id="node5" fill="none" transform="matrix(1,0,0,1,382,416)">
+        <g id="node5" fill="none" transform="matrix(1,0,0,1,374,392)">
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
-        <g id="node6" fill="none" transform="matrix(1,0,0,1,382,538)">
+        <g id="node6" fill="none" transform="matrix(1,0,0,1,374,506)">
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>

packages/g6/__tests__/integration/snapshots/static/edge-cubic-vertical.svg

@@ -26,11 +26,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,50,66)">
+          <g transform="matrix(1,0,0,1,50,62)">
             <path
               id="key"
               fill="none"
-              d="M 214,0 C 214 150,0 150,0 300 L 3.6739403974420594e-16,294"
+              d="M 198,0 C 198 150,0 150,0 300 L 3.061616997868383e-16,295"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
@@ -41,27 +41,27 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(0,-1,1,0,0,294)">
+            <g transform="matrix(0,-1,1,0,0,295)">
               <path
                 id="g-svg-23"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-23"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -69,7 +69,7 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.811581,-0.584239,0.584239,0.811581,153.753677,218.336960)"
+            transform="matrix(0.789248,-0.614075,0.614075,0.789248,145.843002,214.456299)"
           >
             <g transform="matrix(1,0,0,1,-33.360001,-11.500000)">
               <path
@@ -112,11 +112,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,157,66)">
+          <g transform="matrix(1,0,0,1,149,62)">
             <path
               id="halo"
               fill="none"
-              d="M 107,0 C 107 150,0 150,0 300"
+              d="M 99,0 C 99 150,0 150,0 300"
               stroke-width="12"
               stroke="rgba(153,173,209,1)"
               stroke-dasharray="0,0"
@@ -126,7 +126,7 @@
             <path
               id="halo"
               fill="none"
-              d="M 107,0 C 107 150,0 150,0 300"
+              d="M 99,0 C 99 150,0 150,0 300"
               stroke-width="14"
               stroke="transparent"
               stroke-dasharray="0,0"
@@ -134,11 +134,11 @@
               stroke-opacity="0.25"
             />
           </g>
-          <g transform="matrix(1,0,0,1,157,66)">
+          <g transform="matrix(1,0,0,1,149,62)">
             <path
               id="key"
               fill="none"
-              d="M 107,0 C 107 150,0 150,0 300 L 3.6739403974420594e-16,294"
+              d="M 99,0 C 99 150,0 150,0 300 L 3.061616997868383e-16,295"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
@@ -149,27 +149,27 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(0,-1,1,0,0,294)">
+            <g transform="matrix(0,-1,1,0,0,295)">
               <path
                 id="g-svg-30"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-30"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -177,7 +177,7 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.570463,-0.821323,0.821323,0.570463,208.218155,219.285294)"
+            transform="matrix(0.540623,-0.841265,0.841265,0.540623,196.337509,215.365067)"
           >
             <g transform="matrix(1,0,0,1,-30.480000,-11.500000)">
               <path
@@ -220,7 +220,7 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,264,66)">
+          <g transform="matrix(1,0,0,1,248,62)">
             <path
               id="halo"
               fill="none"
@@ -242,11 +242,11 @@
               stroke-opacity="0.25"
             />
           </g>
-          <g transform="matrix(1,0,0,1,264,66)">
+          <g transform="matrix(1,0,0,1,248,62)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 C 0 150,0 150,0 300 L 3.6739403974420594e-16,294"
+              d="M 0,0 C 0 150,0 150,0 300 L 3.061616997868383e-16,295"
               stroke-width="2"
               stroke="rgba(153,173,209,1)"
             />
@@ -257,32 +257,32 @@
               stroke-width="2"
               stroke="transparent"
             />
-            <g transform="matrix(0,-1,1,0,0,294)">
+            <g transform="matrix(0,-1,1,0,0,295)">
               <path
                 id="g-svg-37"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-37"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
           </g>
-          <g id="label" fill="none" transform="matrix(0,1,-1,0,264,220)">
+          <g id="label" fill="none" transform="matrix(0,1,-1,0,248,216)">
             <g transform="matrix(1,0,0,1,-44.099998,-13.500000)">
               <path
                 id="background"
@@ -325,11 +325,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,264,66)">
+          <g transform="matrix(1,0,0,1,248,62)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 C 0 150,107 150,107 300 L 107,294"
+              d="M 0,0 C 0 150,99 150,99 300 L 99,295"
               stroke-width="2"
               stroke="rgba(153,173,209,1)"
             />
@@ -340,27 +340,27 @@
               stroke-width="2"
               stroke="transparent"
             />
-            <g transform="matrix(0,-1,1,0,107,294)">
+            <g transform="matrix(0,-1,1,0,99,295)">
               <path
                 id="g-svg-44"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-44"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -368,7 +368,7 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.570463,0.821323,-0.821323,0.570463,319.781860,219.285294)"
+            transform="matrix(0.540620,0.841267,-0.841267,0.540620,299.662476,215.365067)"
           >
             <g transform="matrix(1,0,0,1,-38.279999,-11.500000)">
               <path
@@ -412,13 +412,14 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,264,66)">
+          <g transform="matrix(1,0,0,1,248,62)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 C 0 150,214 150,214 300 L 214,294"
+              d="M 0,0 C 0 150,198 150,198 300 L 198,295"
               stroke-width="1"
-              stroke="rgba(210,218,233,1)"
+              stroke="rgba(153,173,209,1)"
+              opacity="0.25"
             />
             <path
               id="key"
@@ -426,28 +427,29 @@
               d="M 0,0 C 0 0,0 0,0 0"
               stroke-width="3"
               stroke="transparent"
+              opacity="0.25"
             />
-            <g transform="matrix(0,-1,1,0,214,294)">
+            <g transform="matrix(0,-1,1,0,198,295)">
               <path
                 id="g-svg-51"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-51"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -455,7 +457,7 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.811582,0.584239,-0.584239,0.811582,374.246338,218.336960)"
+            transform="matrix(0.789248,0.614075,-0.614075,0.789248,350.156982,214.456299)"
           >
             <g transform="matrix(1,0,0,1,-35.639999,-11.500000)">
               <path
@@ -477,6 +479,7 @@
                 dx="0.5"
                 font-size="12"
                 text-anchor="middle"
+                opacity="0.25"
               >
                 line-inactive
               </text>
@@ -485,87 +488,75 @@
         </g>
       </g>
       <g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="node1" fill="none" transform="matrix(1,0,0,1,264,50)">
+        <g id="node1" fill="none" transform="matrix(1,0,0,1,248,50)">
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
-        <g id="node2" fill="none" transform="matrix(1,0,0,1,50,382)">
+        <g id="node2" fill="none" transform="matrix(1,0,0,1,50,374)">
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
-        <g id="node3" fill="none" transform="matrix(1,0,0,1,157,382)">
+        <g id="node3" fill="none" transform="matrix(1,0,0,1,149,374)">
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
-        <g id="node4" fill="none" transform="matrix(1,0,0,1,264,382)">
+        <g id="node4" fill="none" transform="matrix(1,0,0,1,248,374)">
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
-        <g id="node5" fill="none" transform="matrix(1,0,0,1,371,382)">
+        <g id="node5" fill="none" transform="matrix(1,0,0,1,347,374)">
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
-        <g id="node6" fill="none" transform="matrix(1,0,0,1,478,382)">
+        <g id="node6" fill="none" transform="matrix(1,0,0,1,446,374)">
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>

packages/g6/__tests__/integration/snapshots/static/edge-cubic.svg

@@ -26,11 +26,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,49.868023,253.100952)">
+          <g transform="matrix(1,0,0,1,45.943867,252.325714)">
             <path
               id="key"
               fill="none"
-              d="M 184.43535068392123,0 C 96.09387384763396 37.83891496310943,88.34147683628724 -1.4026489784368152,0 36.43626598467259 L 5.515360991345066,34.073895747993085"
+              d="M 192.28366347223044,0 C 100.01803024178858 38.6141546642441,92.26563323044186 -0.6274092773021493,0 37.98674538694195 L 4.612359278240949,36.056423681001554"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
@@ -41,27 +41,27 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(0.919227,-0.393728,0.393728,0.919227,5.515361,34.073895)">
+            <g transform="matrix(0.922472,-0.386064,0.386064,0.922472,4.612359,36.056423)">
               <path
                 id="g-svg-23"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-23"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -69,7 +69,7 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.999993,0.003860,-0.003860,0.999993,138.085724,271.303650)"
+            transform="matrix(0.999992,-0.004061,0.004061,0.999992,138.085724,271.335327)"
           >
             <g transform="matrix(1,0,0,1,-33.360001,-11.500000)">
               <path
@@ -112,11 +112,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,260.876526,100.383797)">
+          <g transform="matrix(1,0,0,1,258.157410,97.450142)">
             <path
               id="halo"
               fill="none"
-              d="M 0,137.88159958233672 C 49.23140682960337 55.34512759558834,78.56791633910922 82.53647198674838,127.79932316871259 0"
+              d="M 0,143.74890148423788 C 51.95054126871935 58.278778546538916,81.2870507782252 85.47012293769896,133.23759204694454 0"
               stroke-width="12"
               stroke="rgba(153,173,209,1)"
               stroke-dasharray="0,0"
@@ -126,7 +126,7 @@
             <path
               id="halo"
               fill="none"
-              d="M 0,137.88159958233672 C 49.23140682960337 55.34512759558834,78.56791633910922 82.53647198674838,127.79932316871259 0"
+              d="M 0,143.74890148423788 C 51.95054126871935 58.278778546538916,81.2870507782252 85.47012293769896,133.23759204694454 0"
               stroke-width="14"
               stroke="transparent"
               stroke-dasharray="0,0"
@@ -134,11 +134,11 @@
               stroke-opacity="0.25"
             />
           </g>
-          <g transform="matrix(1,0,0,1,260.876526,100.383797)">
+          <g transform="matrix(1,0,0,1,258.157410,97.450142)">
             <path
               id="key"
               fill="none"
-              d="M 0,137.88159958233672 C 49.23140682960337 55.34512759558834,78.56791633910922 82.53647198674838,127.79932316871259 0 L 124.72569364024866,5.1529410555288315"
+              d="M 0,143.74890148423788 C 51.95054126871935 58.278778546538916,81.2870507782252 85.47012293769896,133.23759204694454 0 L 130.6405844178927,4.272651562513218"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
@@ -149,27 +149,27 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(-0.512272,0.858824,-0.858824,-0.512272,124.725693,5.152941)">
+            <g transform="matrix(-0.519402,0.854530,-0.854530,-0.519402,130.640579,4.272652)">
               <path
                 id="g-svg-30"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-30"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -177,7 +177,7 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.811302,-0.584627,0.584627,0.811302,328.021393,166.986099)"
+            transform="matrix(0.806644,-0.591037,0.591037,0.806644,328.002777,166.960434)"
           >
             <g transform="matrix(1,0,0,1,-30.480000,-11.500000)">
               <path
@@ -220,11 +220,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,224.506287,265.886627)">
+          <g transform="matrix(1,0,0,1,224.156891,261.914978)">
             <path
               id="halo"
               fill="none"
-              d="M 23.592327440446695,0 C 32.279927307015214 95.71063895015709,-7.4366238915336 90.95716013006631,1.250975975034919 186.6677990802234"
+              d="M 24.417068974828936,0 C 32.629320959388394 99.682294070012,-7.087230239160419 94.92881524992123,1.1250217453990388 194.61110931993323"
               stroke-width="12"
               stroke="rgba(153,173,209,1)"
               stroke-dasharray="0,0"
@@ -234,7 +234,7 @@
             <path
               id="halo"
               fill="none"
-              d="M 23.592327440446695,0 C 32.279927307015214 95.71063895015709,-7.4366238915336 90.95716013006631,1.250975975034919 186.6677990802234"
+              d="M 24.417068974828936,0 C 32.629320959388394 99.682294070012,-7.087230239160419 94.92881524992123,1.1250217453990388 194.61110931993323"
               stroke-width="14"
               stroke="transparent"
               stroke-dasharray="0,0"
@@ -242,11 +242,11 @@
               stroke-opacity="0.25"
             />
           </g>
-          <g transform="matrix(1,0,0,1,224.506287,265.886627)">
+          <g transform="matrix(1,0,0,1,224.156891,261.914978)">
             <path
               id="key"
               fill="none"
-              d="M 23.592327440446695,0 C 32.279927307015214 95.71063895015709,-7.4366238915336 90.95716013006631,1.250975975034919 186.6677990802234 L 0.7085892152304614,180.69236465226848"
+              d="M 24.417068974828936,0 C 32.629320959388394 99.682294070012,-7.087230239160419 94.92881524992123,1.1250217453990388 194.61110931993323 L 0.7144912611688587,189.62799134806886"
               stroke-width="2"
               stroke="rgba(153,173,209,1)"
             />
@@ -257,27 +257,27 @@
               stroke-width="2"
               stroke="transparent"
             />
-            <g transform="matrix(-0.090398,-0.995906,0.995906,-0.090398,0.708589,180.692368)">
+            <g transform="matrix(-0.082106,-0.996624,0.996624,-0.082106,0.714491,189.627991)">
               <path
                 id="g-svg-37"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-37"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -285,7 +285,7 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.312681,-0.949858,0.949858,0.312681,235.677200,363.019958)"
+            transform="matrix(0.305152,-0.952303,0.952303,0.305152,235.707321,363.029724)"
           >
             <g transform="matrix(1,0,0,1,-44.099998,-13.500000)">
               <path
@@ -329,11 +329,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,150.559753,71.877472)">
+          <g transform="matrix(1,0,0,1,148.609940,68.384872)">
             <path
               id="key"
               fill="none"
-              d="M 91.64101585980438,164.15213670897606 C 28.35751460714306 91.82511262607024,63.283501252661324 72.3270240829058,0 0 L 3.950934125841986,4.515541997729311"
+              d="M 95.54063356843727,171.1373340380797 C 30.307323461459504 95.31771129062206,65.23331010697777 75.81962274745761,0 0 L 3.261013377485656,3.790223179690029"
               stroke-width="2"
               stroke="rgba(153,173,209,1)"
             />
@@ -344,27 +344,27 @@
               stroke-width="2"
               stroke="transparent"
             />
-            <g transform="matrix(0.658489,0.752590,-0.752590,0.658489,3.950934,4.515542)">
+            <g transform="matrix(0.652203,0.758045,-0.758045,0.652203,3.261013,3.790223)">
               <path
                 id="g-svg-44"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-44"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -372,7 +372,7 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.305316,0.952251,-0.952251,0.305316,195.158997,150.144531)"
+            transform="matrix(0.312838,0.949807,-0.949807,0.312838,195.128906,150.154312)"
           >
             <g transform="matrix(1,0,0,1,-38.279999,-11.500000)">
               <path
@@ -416,13 +416,14 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,264.521545,256.717529)">
+          <g transform="matrix(1,0,0,1,260.891144,255.038147)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 C 93.71089749828724 21.31353043621158,76.91709000030988 57.61735984470346,170.62798749859712 78.93089028091504 L 164.777400905183,77.60023761663228"
+              d="M 0,0 C 97.34128043913643 22.99291118600928,80.54747294115907 59.29674059450116,177.8887533802955 82.28965178051044 L 173.02266219766477,81.14023601486096"
               stroke-width="1"
-              stroke="rgba(210,218,233,1)"
+              stroke="rgba(153,173,209,1)"
+              opacity="0.25"
             />
             <path
               id="key"
@@ -430,28 +431,29 @@
               d="M 0,0 C 0 0,0 0,0 0"
               stroke-width="3"
               stroke="transparent"
+              opacity="0.25"
             />
-            <g transform="matrix(-0.975098,-0.221776,0.221776,-0.975098,164.777405,77.600235)">
+            <g transform="matrix(-0.973218,-0.229883,0.229883,-0.973218,173.022659,81.140236)">
               <path
                 id="g-svg-51"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-51"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -459,7 +461,7 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.806745,0.590900,-0.590900,0.806745,353.062531,298.546570)"
+            transform="matrix(0.811402,0.584489,-0.584489,0.811402,353.081116,298.520935)"
           >
             <g transform="matrix(1,0,0,1,-35.639999,-11.500000)">
               <path
@@ -481,6 +483,7 @@
                 dx="0.5"
                 font-size="12"
                 text-anchor="middle"
+                opacity="0.25"
               >
                 line-inactive
               </text>
@@ -493,13 +496,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -511,13 +512,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -529,13 +528,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -547,13 +544,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -565,13 +560,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -583,13 +576,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>

packages/g6/__tests__/integration/snapshots/static/edge-custom-arrow.svg

@@ -26,11 +26,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,141,83.333336)">
+          <g transform="matrix(1,0,0,1,137,83.333336)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 204,1.7145055188062944e-15"
+              d="M 0,0 L 212,1.7145055188062944e-15"
               stroke-width="1"
               stroke="rgba(246,189,22,1)"
             />
@@ -41,7 +41,7 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(-1,0,-0,-1,204,0)">
+            <g transform="matrix(-1,0,-0,-1,212,0)">
               <path
                 id="g-svg-23"
                 fill="rgba(246,189,22,1)"
@@ -49,8 +49,8 @@
                 transform="translate(-14,-14)"
                 stroke-width="1"
                 stroke="rgba(246,189,22,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
@@ -60,8 +60,8 @@
                 transform="translate(-14,-14)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -108,11 +108,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,141,250)">
+          <g transform="matrix(1,0,0,1,137,250)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 208,1.2246467991473533e-15"
+              d="M 0,0 L 216,1.2246467991473533e-15"
               stroke-width="1"
               stroke="rgba(246,189,22,1)"
             />
@@ -123,7 +123,7 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(-1,0,-0,-1,208,0)">
+            <g transform="matrix(-1,0,-0,-1,216,0)">
               <path
                 id="g-svg-30"
                 fill="rgba(246,189,22,1)"
@@ -131,8 +131,8 @@
                 transform="translate(-6,-10)"
                 stroke-width="1"
                 stroke="rgba(246,189,22,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
@@ -142,8 +142,8 @@
                 transform="translate(-6,-10)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -190,11 +190,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,141,416.666656)">
+          <g transform="matrix(1,0,0,1,137,416.666656)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 203,1.83697019872103e-15"
+              d="M 0,0 L 211,1.83697019872103e-15"
               stroke-width="1"
               stroke="rgba(246,189,22,1)"
             />
@@ -205,7 +205,7 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(-0,-1,1,-0,203,0)">
+            <g transform="matrix(-0,-1,1,-0,211,0)">
               <image
                 id="g-svg-37"
                 fill="rgba(246,189,22,1)"
@@ -269,13 +269,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -283,13 +281,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -297,13 +293,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -311,13 +305,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -325,13 +317,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -339,13 +329,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>

packages/g6/__tests__/integration/snapshots/static/edge-line.svg

@@ -26,11 +26,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,49.868023,253.100952)">
+          <g transform="matrix(1,0,0,1,45.943867,252.325714)">
             <path
               id="key"
               fill="none"
-              d="M 184.43535068392123,0 L 5.886234591231936,35.27340643297058"
+              d="M 192.28366347223044,0 L 4.905195492693281,37.01769576052361"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
@@ -41,27 +41,27 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(0.981039,-0.193810,0.193810,0.981039,5.886235,35.273407)">
+            <g transform="matrix(0.981039,-0.193810,0.193810,0.981039,4.905196,37.017696)">
               <path
                 id="g-svg-23"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-23"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -69,7 +69,7 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.981040,-0.193804,0.193804,0.981040,138.161530,272.094299)"
+            transform="matrix(0.981041,-0.193802,0.193802,0.981041,138.161530,272.094299)"
           >
             <g transform="matrix(1,0,0,1,-33.360001,-11.500000)">
               <path
@@ -112,11 +112,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,260.876526,100.383797)">
+          <g transform="matrix(1,0,0,1,258.157410,97.450142)">
             <path
               id="halo"
               fill="none"
-              d="M 0,137.88159958233672 L 127.79932316871259,0"
+              d="M 0,143.74890148423788 L 133.23759204694454,0"
               stroke-width="12"
               stroke="rgba(153,173,209,1)"
               stroke-dasharray="0,0"
@@ -126,7 +126,7 @@
             <path
               id="halo"
               fill="none"
-              d="M 0,137.88159958233672 L 127.79932316871259,0"
+              d="M 0,143.74890148423788 L 133.23759204694454,0"
               stroke-width="14"
               stroke="transparent"
               stroke-dasharray="0,0"
@@ -134,11 +134,11 @@
               stroke-opacity="0.25"
             />
           </g>
-          <g transform="matrix(1,0,0,1,260.876526,100.383797)">
+          <g transform="matrix(1,0,0,1,258.157410,97.450142)">
             <path
               id="key"
               fill="none"
-              d="M 0,137.88159958233672 L 123.72062151003858,4.40047642642588"
+              d="M 0,143.74890148423788 L 129.83867399804953,3.6670636886882346"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
@@ -149,27 +149,27 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(-0.679784,0.733413,-0.733413,-0.679784,123.720619,4.400476)">
+            <g transform="matrix(-0.679784,0.733413,-0.733413,-0.679784,129.838669,3.667064)">
               <path
                 id="g-svg-30"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-30"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -177,7 +177,7 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.679786,-0.733410,0.733410,0.679786,327.495331,166.390961)"
+            transform="matrix(0.679782,-0.733414,0.733414,0.679782,327.495331,166.390930)"
           >
             <g transform="matrix(1,0,0,1,-30.480000,-11.500000)">
               <path
@@ -220,11 +220,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,225.757263,265.886627)">
+          <g transform="matrix(1,0,0,1,225.281906,261.914978)">
             <path
               id="halo"
               fill="none"
-              d="M 22.341351465411776,0 L 0,186.6677990802234"
+              d="M 23.292047229429897,0 L 0,194.61110931993323"
               stroke-width="12"
               stroke="rgba(153,173,209,1)"
               stroke-dasharray="0,0"
@@ -234,7 +234,7 @@
             <path
               id="halo"
               fill="none"
-              d="M 22.341351465411776,0 L 0,186.6677990802234"
+              d="M 23.292047229429897,0 L 0,194.61110931993323"
               stroke-width="14"
               stroke="transparent"
               stroke-dasharray="0,0"
@@ -242,11 +242,11 @@
               stroke-opacity="0.25"
             />
           </g>
-          <g transform="matrix(1,0,0,1,225.757263,265.886627)">
+          <g transform="matrix(1,0,0,1,225.281906,261.914978)">
             <path
               id="key"
               fill="none"
-              d="M 22.341351465411776,0 L 0.7130218230136152,180.7103164004411"
+              d="M 23.292047229429897,0 L 0.5941848525113449,189.64654042011463"
               stroke-width="2"
               stroke="rgba(153,173,209,1)"
             />
@@ -257,27 +257,27 @@
               stroke-width="2"
               stroke="transparent"
             />
-            <g transform="matrix(0.118837,-0.992914,0.992914,0.118837,0.713022,180.710312)">
+            <g transform="matrix(0.118837,-0.992914,0.992914,0.118837,0.594185,189.646545)">
               <path
                 id="g-svg-37"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-37"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -285,7 +285,7 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.118831,-0.992915,0.992915,0.118831,236.452606,363.192169)"
+            transform="matrix(0.118840,-0.992913,0.992913,0.118840,236.452576,363.192169)"
           >
             <g transform="matrix(1,0,0,1,-44.099998,-13.500000)">
               <path
@@ -329,11 +329,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,150.559753,71.877472)">
+          <g transform="matrix(1,0,0,1,148.609940,68.384872)">
             <path
               id="key"
               fill="none"
-              d="M 91.64101585980438,164.15213670897606 L 2.9247132814746704,5.238897996827736"
+              d="M 95.54063356843727,171.1373340380797 L 2.437261067895559,4.3657483306897795"
               stroke-width="2"
               stroke="rgba(153,173,209,1)"
             />
@@ -344,27 +344,27 @@
               stroke-width="2"
               stroke="transparent"
             />
-            <g transform="matrix(0.487452,0.873150,-0.873150,0.487452,2.924713,5.238898)">
+            <g transform="matrix(0.487452,0.873150,-0.873150,0.487452,2.437261,4.365748)">
               <path
                 id="g-svg-44"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-44"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -372,7 +372,7 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.487452,0.873150,-0.873150,0.487452,194.430450,150.460938)"
+            transform="matrix(0.487448,0.873152,-0.873152,0.487448,194.430450,150.460922)"
           >
             <g transform="matrix(1,0,0,1,-38.279999,-11.500000)">
               <path
@@ -416,13 +416,14 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,264.521545,256.717529)">
+          <g transform="matrix(1,0,0,1,260.891144,255.038147)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 165.18241308732334,76.41181915621843"
+              d="M 0,0 L 173.35077470423403,80.19042584326327"
               stroke-width="1"
-              stroke="rgba(210,218,233,1)"
+              stroke="rgba(153,173,209,1)"
+              opacity="0.25"
             />
             <path
               id="key"
@@ -430,28 +431,29 @@
               d="M 0,0 L 0,0"
               stroke-width="3"
               stroke="transparent"
+              opacity="0.25"
             />
-            <g transform="matrix(-0.907596,-0.419845,0.419845,-0.907596,165.182419,76.411819)">
+            <g transform="matrix(-0.907596,-0.419845,0.419845,-0.907596,173.350769,80.190422)">
               <path
                 id="g-svg-51"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-51"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -459,7 +461,7 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.907595,0.419847,-0.419847,0.907595,353.465912,297.862366)"
+            transform="matrix(0.907601,0.419834,-0.419834,0.907601,353.465912,297.862305)"
           >
             <g transform="matrix(1,0,0,1,-35.639999,-11.500000)">
               <path
@@ -481,6 +483,7 @@
                 dx="0.5"
                 font-size="12"
                 text-anchor="middle"
+                opacity="0.25"
               >
                 line-inactive
               </text>
@@ -493,13 +496,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -511,13 +512,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -529,13 +528,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -547,13 +544,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -565,13 +560,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -583,13 +576,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>

packages/g6/__tests__/integration/snapshots/static/edge-loop-curve.svg

@@ -30,38 +30,38 @@
             <path
               id="key"
               fill="none"
-              d="M 11.141521586992127,49.31553705333752 C -34.42606543401598 -16.438512351112507,77.49912265294097 -16.438512351112507,31.93153563193286 49.31553705333752 L 35.349104658508466,44.38398334800377"
+              d="M 11.141521586992127,49.31553705333752 C -34.42606543401598 -16.438512351112507,77.49912265294097 -16.438512351112507,31.93153563193286 49.31553705333752 L 34.779509820745865,45.205908965559395"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
             <path
               id="key"
               fill="none"
-              d="M 11.14152158699211,49.31553705333751 C -34.42606543401601 -16.438512351112507,77.49912265294097 -16.438512351112507,31.931535631932853 49.31553705333751 L 35.34910465850846,44.38398334800376"
+              d="M 11.14152158699211,49.31553705333751 C -34.42606543401601 -16.438512351112507,77.49912265294097 -16.438512351112507,31.931535631932853 49.31553705333751 L 34.77950982074586,45.20590896555938"
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(0.569595,-0.821926,0.821926,0.569595,35.349106,44.383984)">
+            <g transform="matrix(0.569595,-0.821926,0.821926,0.569595,34.779510,45.205910)">
               <path
                 id="g-svg-23"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-23"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -86,38 +86,38 @@
             <path
               id="key"
               fill="none"
-              d="M 0,2.9427866643670626 C 78.71628400922481 -11.33119777513187,78.71628400922481 31.723537645666767,0 17.449553206167877 L 5.903721300691862,18.520102039130293"
+              d="M 0,2.9427866643670626 C 78.71628400922481 -11.33119777513187,78.71628400922481 31.723537645666767,0 17.449553206167877 L 4.919767750576551,18.34167723363656"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
             <path
               id="key"
               fill="none"
-              d="M 0,2.942786664367068 C 78.71628400922481 -11.331197775131862,78.71628400922481 31.72353764566683,0 17.4495532061679 L 5.903721300691861,18.520102039130318"
+              d="M 0,2.942786664367068 C 78.71628400922481 -11.331197775131862,78.71628400922481 31.72353764566683,0 17.4495532061679 L 4.9197677505765505,18.34167723363658"
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(0.983954,0.178425,-0.178425,0.983954,5.903721,18.520102)">
+            <g transform="matrix(0.983954,0.178425,-0.178425,0.983954,4.919768,18.341677)">
               <path
                 id="g-svg-27"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-27"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -142,38 +142,38 @@
             <path
               id="key"
               fill="none"
-              d="M 31.931535631932846,0 C 77.49912265294095 65.75404940445003,-34.426065434015996 65.75404940445003,11.141521586992113 0 L 7.723952560416505,4.9315537053337515"
+              d="M 31.931535631932846,0 C 77.49912265294095 65.75404940445003,-34.426065434015996 65.75404940445003,11.141521586992113 0 L 8.293547398179106,4.109628087778126"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
             <path
               id="key"
               fill="none"
-              d="M 31.931535631932853,0 C 77.49912265294098 65.75404940445002,-34.42606543401601 65.75404940445002,11.141521586992113 0 L 7.723952560416503,4.93155370533375"
+              d="M 31.931535631932853,0 C 77.49912265294098 65.75404940445002,-34.42606543401601 65.75404940445002,11.141521586992113 0 L 8.293547398179104,4.109628087778125"
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(-0.569595,0.821926,-0.821926,-0.569595,7.723953,4.931554)">
+            <g transform="matrix(-0.569595,0.821926,-0.821926,-0.569595,8.293548,4.109628)">
               <path
                 id="g-svg-31"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-31"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -198,38 +198,38 @@
             <path
               id="key"
               fill="none"
-              d="M 59.037213006918606,17.44955320616792 C -19.679071002306202 31.723537645666866,-19.679071002306202 -11.331197775131855,59.037213006918606 2.942786664367077 L 53.13349170622674,1.8722378314046566"
+              d="M 59.037213006918606,17.44955320616792 C -19.679071002306202 31.723537645666866,-19.679071002306202 -11.331197775131855,59.037213006918606 2.942786664367077 L 54.11744525634205,2.050662636898393"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
             <path
               id="key"
               fill="none"
-              d="M 59.037213006918606,17.449553206167895 C -19.679071002306202 31.72353764566683,-19.679071002306202 -11.331197775131852,59.037213006918606 2.9427866643670635 L 53.13349170622674,1.8722378314046457"
+              d="M 59.037213006918606,17.449553206167895 C -19.679071002306202 31.72353764566683,-19.679071002306202 -11.331197775131852,59.037213006918606 2.9427866643670635 L 54.11744525634205,2.050662636898382"
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(-0.983954,-0.178425,0.178425,-0.983954,53.133492,1.872238)">
+            <g transform="matrix(-0.983954,-0.178425,0.178425,-0.983954,54.117447,2.050663)">
               <path
                 id="g-svg-35"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-35"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -254,38 +254,38 @@
             <path
               id="key"
               fill="none"
-              d="M 0,30.4067705946306 C 45.567587021008194 -35.34727880981936,108.32127698675441 23.879402884231254,29.604992977529605 38.153387323730186 L 35.50871427822147,37.08283849076776"
+              d="M 0,30.4067705946306 C 45.567587021008194 -35.34727880981936,108.32127698675441 23.879402884231254,29.604992977529605 38.153387323730186 L 34.52476072810616,37.261263296261504"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
             <path
               id="key"
               fill="none"
-              d="M 0,30.406770594630622 C 45.56758702100812 -35.34727880981939,108.32127698675444 23.879402884231276,29.604992977529626 38.15338732373021 L 35.50871427822149,37.082838490767784"
+              d="M 0,30.406770594630622 C 45.56758702100812 -35.34727880981939,108.32127698675444 23.879402884231276,29.604992977529626 38.15338732373021 L 34.52476072810617,37.261263296261525"
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(0.983954,-0.178425,0.178425,0.983954,35.508713,37.082840)">
+            <g transform="matrix(0.983954,-0.178425,0.178425,0.983954,34.524761,37.261265)">
               <path
                 id="g-svg-39"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-39"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -310,38 +310,38 @@
             <path
               id="key"
               fill="none"
-              d="M 29.604992977529605,0 C 108.32127698675441 14.27398443949889,45.567587021008194 73.50066613354957,0 7.7466167290996 L 3.417569026575614,12.678170434433348"
+              d="M 29.604992977529605,0 C 108.32127698675441 14.27398443949889,45.567587021008194 73.50066613354957,0 7.7466167290996 L 2.8479741888130117,11.856244816877723"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
             <path
               id="key"
               fill="none"
-              d="M 29.604992977529626,0 C 108.32127698675444 14.27398443949893,45.56758702100812 73.5006661335496,0 7.746616729099582 L 3.4175690265756087,12.678170434433333"
+              d="M 29.604992977529626,0 C 108.32127698675444 14.27398443949893,45.56758702100812 73.5006661335496,0 7.746616729099582 L 2.8479741888130072,11.856244816877707"
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(0.569595,0.821926,-0.821926,0.569595,3.417569,12.678170)">
+            <g transform="matrix(0.569595,0.821926,-0.821926,0.569595,2.847974,11.856245)">
               <path
                 id="g-svg-43"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-43"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -366,38 +366,38 @@
             <path
               id="key"
               fill="none"
-              d="M 67.07595130128988,7.746616729099571 C 21.508364280281853 73.50066613354966,-41.24532568546459 14.273984439498946,37.470958323760215 0 L 31.567237023068355,1.0705488329624202"
+              d="M 67.07595130128988,7.746616729099571 C 21.508364280281853 73.50066613354966,-41.24532568546459 14.273984439498946,37.470958323760215 0 L 32.55119057318366,0.8921240274686836"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
             <path
               id="key"
               fill="none"
-              d="M 67.07595130128992,7.7466167290995775 C 21.508364280281796 73.5006661335496,-41.24532568546452 14.273984439498935,37.470958323760286 0 L 31.567237023068426,1.0705488329624202"
+              d="M 67.07595130128992,7.7466167290995775 C 21.508364280281796 73.5006661335496,-41.24532568546452 14.273984439498935,37.470958323760286 0 L 32.55119057318373,0.8921240274686836"
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(-0.983954,0.178425,-0.178425,-0.983954,31.567238,1.070549)">
+            <g transform="matrix(-0.983954,0.178425,-0.178425,-0.983954,32.551189,0.892124)">
               <path
                 id="g-svg-47"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-47"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -422,38 +422,38 @@
             <path
               id="key"
               fill="none"
-              d="M 37.47095832376027,38.15338732373023 C -41.245325685464536 23.879402884231297,21.50836428028191 -35.34727880981944,67.07595130128993 30.406770594630643 L 63.658382274714334,25.475216889296888"
+              d="M 37.47095832376027,38.15338732373023 C -41.245325685464536 23.879402884231297,21.50836428028191 -35.34727880981944,67.07595130128993 30.406770594630643 L 64.22797711247694,26.297142506852513"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
             <path
               id="key"
               fill="none"
-              d="M 37.47095832376027,38.15338732373021 C -41.245325685464536 23.87940288423129,21.508364280281782 -35.3472788098194,67.0759513012899 30.406770594630615 L 63.65838227471429,25.475216889296867"
+              d="M 37.47095832376027,38.15338732373021 C -41.245325685464536 23.87940288423129,21.508364280281782 -35.3472788098194,67.0759513012899 30.406770594630615 L 64.22797711247689,26.297142506852488"
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(-0.569595,-0.821926,0.821926,-0.569595,63.658382,25.475218)">
+            <g transform="matrix(-0.569595,-0.821926,0.821926,-0.569595,64.227974,26.297142)">
               <path
                 id="g-svg-51"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-51"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -489,27 +489,27 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(1,0,0,1,30.811388,36.729607)">
+            <g transform="matrix(1,0,0,1,29.811388,36.729607)">
               <path
                 id="g-svg-55"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-55"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -534,38 +534,38 @@
             <path
               id="key"
               fill="none"
-              d="M 0,10.859555072381283 C 77.31671842700024 -27.798804141118865,77.31671842700024 52.201195858881135,0 13.542836645380987 L 5.3665631459994945,16.226118218380737"
+              d="M 0,10.859555072381283 C 77.31671842700024 -27.798804141118865,77.31671842700024 52.201195858881135,0 13.542836645380987 L 4.472135954999579,15.778904622880777"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
             <path
               id="key"
               fill="none"
-              d="M 0,10.859555072381296 C 77.31671842700025 -27.79880414111883,77.31671842700025 52.20119585888117,0 13.542836645381042 L 5.366563145999495,16.22611821838079"
+              d="M 0,10.859555072381296 C 77.31671842700025 -27.79880414111883,77.31671842700025 52.20119585888117,0 13.542836645381042 L 4.47213595499958,15.778904622880832"
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(0.894427,0.447214,-0.447214,0.894427,5.366563,16.226118)">
+            <g transform="matrix(0.894427,0.447214,-0.447214,0.894427,4.472136,15.778905)">
               <path
                 id="g-svg-59"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-59"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -577,11 +577,9 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               d="M 0,0 l 80,0 l 0,30 l-80 0 z"
               transform="translate(-40,-15)"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               width="80"
               height="30"
             />
@@ -591,11 +589,9 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               d="M 0,0 l 80,0 l 0,30 l-80 0 z"
               transform="translate(-40,-15)"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               width="80"
               height="30"
             />
@@ -605,11 +601,9 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               d="M 0,0 l 80,0 l 0,30 l-80 0 z"
               transform="translate(-40,-15)"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               width="80"
               height="30"
             />
@@ -617,7 +611,7 @@
           <g transform="matrix(1,0,0,1,16,-15)">
             <circle
               id="port-port-top"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -630,7 +624,7 @@
           <g transform="matrix(1,0,0,1,40,0)">
             <circle
               id="port-port-right"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -645,11 +639,9 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               d="M 0,0 l 80,0 l 0,30 l-80 0 z"
               transform="translate(-40,-15)"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               width="80"
               height="30"
             />
@@ -657,7 +649,7 @@
           <g transform="matrix(1,0,0,1,16,-15)">
             <circle
               id="port-port-top"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -670,7 +662,7 @@
           <g transform="matrix(1,0,0,1,40,0)">
             <circle
               id="port-port-right"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"

packages/g6/__tests__/integration/snapshots/static/edge-loop-polyline.svg

@@ -30,38 +30,38 @@
             <path
               id="key"
               fill="none"
-              d="M 0,20 L 0,0 L 20.790014044940733,0 L 20.790014044940733,14"
+              d="M 0,20 L 0,0 L 20.790014044940733,0 L 20.790014044940733,15"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
             <path
               id="key"
               fill="none"
-              d="M 0,20 L 0,0 L 20.79001404494074,0 L 20.79001404494074,14"
+              d="M 0,20 L 0,0 L 20.79001404494074,0 L 20.79001404494074,15"
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(0,-1,1,0,20.790014,14)">
+            <g transform="matrix(0,-1,1,0,20.790014,15)">
               <path
                 id="g-svg-23"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-23"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -97,27 +97,27 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(1,0,0,1,6,14.506766)">
+            <g transform="matrix(1,0,0,1,5,14.506766)">
               <path
                 id="g-svg-27"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-27"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -142,38 +142,38 @@
             <path
               id="key"
               fill="none"
-              d="M 20.790014044940733,0 L 20.790014044940733,20 L 0,20 L 3.6739403974420594e-16,6"
+              d="M 20.790014044940733,0 L 20.790014044940733,20 L 0,20 L 3.061616997868383e-16,5"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
             <path
               id="key"
               fill="none"
-              d="M 20.79001404494074,0 L 20.79001404494074,20 L 0,20 L 3.6739403974420594e-16,6"
+              d="M 20.79001404494074,0 L 20.79001404494074,20 L 0,20 L 3.061616997868383e-16,5"
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(0,1,-1,0,0,6)">
+            <g transform="matrix(0,1,-1,0,0,5)">
               <path
                 id="g-svg-31"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-31"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -198,38 +198,38 @@
             <path
               id="key"
               fill="none"
-              d="M 20,14.506766541800843 L 0,14.506766541800843 L 0,0 L 14,7.347880794884119e-16"
+              d="M 20,14.506766541800843 L 0,14.506766541800843 L 0,0 L 15,6.123233995736766e-16"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
             <path
               id="key"
               fill="none"
-              d="M 20,14.50676654180083 L 0,14.50676654180083 L 0,0 L 14,7.347880794884119e-16"
+              d="M 20,14.50676654180083 L 0,14.50676654180083 L 0,0 L 15,6.123233995736766e-16"
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(-1,0,-0,-1,14,0)">
+            <g transform="matrix(-1,0,-0,-1,15,0)">
               <path
                 id="g-svg-35"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-35"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -265,27 +265,27 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(1,0,0,1,35.604992,27.746616)">
+            <g transform="matrix(1,0,0,1,34.604992,27.746616)">
               <path
                 id="g-svg-39"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-39"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -310,38 +310,38 @@
             <path
               id="key"
               fill="none"
-              d="M 29.604992977529605,0 L 49.604992977529605,0 L 49.604992977529605,27.7466167290996 L 0,27.7466167290996 L 3.6739403974420594e-16,13.7466167290996"
+              d="M 29.604992977529605,0 L 49.604992977529605,0 L 49.604992977529605,27.7466167290996 L 0,27.7466167290996 L 3.061616997868383e-16,12.7466167290996"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
             <path
               id="key"
               fill="none"
-              d="M 29.604992977529626,0 L 49.604992977529626,0 L 49.604992977529626,27.746616729099586 L 0,27.746616729099586 L 3.6739403974420594e-16,13.746616729099582"
+              d="M 29.604992977529626,0 L 49.604992977529626,0 L 49.604992977529626,27.746616729099586 L 0,27.746616729099586 L 3.061616997868383e-16,12.746616729099582"
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(0,1,-1,0,0,13.746616)">
+            <g transform="matrix(0,1,-1,0,0,12.746616)">
               <path
                 id="g-svg-43"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-43"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -366,38 +366,38 @@
             <path
               id="key"
               fill="none"
-              d="M 49.60499297752966,7.746616729099571 L 49.60499297752966,27.74661672909957 L 0,27.74661672909957 L 0,0 L 14,7.347880794884119e-16"
+              d="M 49.60499297752966,7.746616729099571 L 49.60499297752966,27.74661672909957 L 0,27.74661672909957 L 0,0 L 15,6.123233995736766e-16"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
             <path
               id="key"
               fill="none"
-              d="M 49.60499297752963,7.7466167290995775 L 49.60499297752963,27.74661672909958 L 0,27.74661672909958 L 0,0 L 14,7.347880794884119e-16"
+              d="M 49.60499297752963,7.7466167290995775 L 49.60499297752963,27.74661672909958 L 0,27.74661672909958 L 0,0 L 15,6.123233995736766e-16"
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(-1,0,-0,-1,14,0)">
+            <g transform="matrix(-1,0,-0,-1,15,0)">
               <path
                 id="g-svg-47"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-47"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -422,38 +422,38 @@
             <path
               id="key"
               fill="none"
-              d="M 20,27.746616729099586 L 0,27.746616729099586 L 0,0 L 49.60499297752966,0 L 49.60499297752966,14"
+              d="M 20,27.746616729099586 L 0,27.746616729099586 L 0,0 L 49.60499297752966,0 L 49.60499297752966,15"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
             <path
               id="key"
               fill="none"
-              d="M 20,27.74661672909959 L 0,27.74661672909959 L 0,0 L 49.60499297752963,0 L 49.60499297752963,14"
+              d="M 20,27.74661672909959 L 0,27.74661672909959 L 0,0 L 49.60499297752963,0 L 49.60499297752963,15"
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(0,-1,1,0,49.604992,14)">
+            <g transform="matrix(0,-1,1,0,49.604992,15)">
               <path
                 id="g-svg-51"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-51"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -489,27 +489,27 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(1,0,0,1,33,35)">
+            <g transform="matrix(1,0,0,1,32,35)">
               <path
                 id="g-svg-55"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-55"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -534,38 +534,38 @@
             <path
               id="key"
               fill="none"
-              d="M 3,0 L 20,0 L 20,20 L 0,20 L 3.6739403974420594e-16,9"
+              d="M 3,0 L 20,0 L 20,20 L 0,20 L 3.061616997868383e-16,8"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
             <path
               id="key"
               fill="none"
-              d="M 3,0 L 20,0 L 20,20 L 0,20 L 3.6739403974420594e-16,9"
+              d="M 3,0 L 20,0 L 20,20 L 0,20 L 3.061616997868383e-16,8"
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(0,1,-1,0,0,9)">
+            <g transform="matrix(0,1,-1,0,0,8)">
               <path
                 id="g-svg-59"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-59"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -577,11 +577,9 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               d="M 0,0 l 80,0 l 0,30 l-80 0 z"
               transform="translate(-40,-15)"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               width="80"
               height="30"
             />
@@ -591,11 +589,9 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               d="M 0,0 l 80,0 l 0,30 l-80 0 z"
               transform="translate(-40,-15)"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               width="80"
               height="30"
             />
@@ -605,11 +601,9 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               d="M 0,0 l 80,0 l 0,30 l-80 0 z"
               transform="translate(-40,-15)"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               width="80"
               height="30"
             />
@@ -617,7 +611,7 @@
           <g transform="matrix(1,0,0,1,16,-15)">
             <circle
               id="port-port-top"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -630,7 +624,7 @@
           <g transform="matrix(1,0,0,1,40,0)">
             <circle
               id="port-port-right"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -645,11 +639,9 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               d="M 0,0 l 80,0 l 0,30 l-80 0 z"
               transform="translate(-40,-15)"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               width="80"
               height="30"
             />
@@ -657,7 +649,7 @@
           <g transform="matrix(1,0,0,1,16,-15)">
             <circle
               id="port-port-top"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -670,7 +662,7 @@
           <g transform="matrix(1,0,0,1,40,0)">
             <circle
               id="port-port-right"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"

packages/g6/__tests__/integration/snapshots/static/edge-port.svg

@@ -46,20 +46,20 @@
           <path
             id="key"
             fill="none"
-            d="M 0,0 L 94,7.347880794884119e-16"
+            d="M 0,0 L 95,6.123233995736766e-16"
             stroke-width="2"
             stroke="rgba(24,144,255,1)"
           />
-          <g transform="matrix(-1,0,-0,-1,94,0)">
+          <g transform="matrix(-1,0,-0,-1,95,0)">
             <path
               id="g-svg-12"
               fill="rgba(24,144,255,1)"
-              d="M 0,5 L 10,0 L 10,10 Z"
-              transform="translate(-5,-5)"
+              d="M 0,4 L 8,0 L 8,8 Z"
+              transform="translate(-4,-4)"
               stroke-width="1"
               stroke="rgba(24,144,255,1)"
-              width="10"
-              height="10"
+              width="8"
+              height="8"
               stroke-dasharray="0,0"
             />
           </g>
@@ -218,20 +218,20 @@
           <path
             id="key"
             fill="none"
-            d="M 0,0 L 111.2718705403271,22.254374108065427"
+            d="M 0,0 L 112.25245121601803,22.450490243203614"
             stroke-width="2"
             stroke="rgba(24,144,255,1)"
           />
-          <g transform="matrix(-0.980581,-0.196116,0.196116,-0.980581,111.271873,22.254374)">
+          <g transform="matrix(-0.980581,-0.196116,0.196116,-0.980581,112.252449,22.450491)">
             <path
               id="g-svg-31"
               fill="rgba(24,144,255,1)"
-              d="M 0,5 L 10,0 L 10,10 Z"
-              transform="translate(-5,-5)"
+              d="M 0,4 L 8,0 L 8,8 Z"
+              transform="translate(-4,-4)"
               stroke-width="1"
               stroke="rgba(24,144,255,1)"
-              width="10"
-              height="10"
+              width="8"
+              height="8"
               stroke-dasharray="0,0"
             />
           </g>
@@ -352,20 +352,20 @@
           <path
             id="key"
             fill="none"
-            d="M 0,23.431070918894534 L 111.2718705403271,1.1766968108291056"
+            d="M 0,23.431070918894534 L 112.25245121601803,0.9805806756909213"
             stroke-width="2"
             stroke="rgba(24,144,255,1)"
           />
-          <g transform="matrix(-0.980581,0.196116,-0.196116,-0.980581,111.271873,1.176697)">
+          <g transform="matrix(-0.980581,0.196116,-0.196116,-0.980581,112.252449,0.980581)">
             <path
               id="g-svg-46"
               fill="rgba(24,144,255,1)"
-              d="M 0,5 L 10,0 L 10,10 Z"
-              transform="translate(-5,-5)"
+              d="M 0,4 L 8,0 L 8,8 Z"
+              transform="translate(-4,-4)"
               stroke-width="1"
               stroke="rgba(24,144,255,1)"
-              width="10"
-              height="10"
+              width="8"
+              height="8"
               stroke-dasharray="0,0"
             />
           </g>
@@ -485,20 +485,20 @@
           <path
             id="key"
             fill="none"
-            d="M 0,0 L 111.2718705403271,22.254374108065427"
+            d="M 0,0 L 112.25245121601803,22.450490243203614"
             stroke-width="2"
             stroke="rgba(24,144,255,1)"
           />
-          <g transform="matrix(-0.980581,-0.196116,0.196116,-0.980581,111.271873,22.254374)">
+          <g transform="matrix(-0.980581,-0.196116,0.196116,-0.980581,112.252449,22.450491)">
             <path
               id="g-svg-61"
               fill="rgba(24,144,255,1)"
-              d="M 0,5 L 10,0 L 10,10 Z"
-              transform="translate(-5,-5)"
+              d="M 0,4 L 8,0 L 8,8 Z"
+              transform="translate(-4,-4)"
               stroke-width="1"
               stroke="rgba(24,144,255,1)"
-              width="10"
-              height="10"
+              width="8"
+              height="8"
               stroke-dasharray="0,0"
             />
           </g>
@@ -618,20 +618,20 @@
           <path
             id="key"
             fill="none"
-            d="M 0,23.86862915010147 L 161.14070708874368,0.8485281374238557"
+            d="M 0,23.86862915010147 L 162.13065658240484,0.7071067811865464"
             stroke-width="2"
             stroke="rgba(24,144,255,1)"
           />
-          <g transform="matrix(-0.989950,0.141421,-0.141421,-0.989950,161.140701,0.848528)">
+          <g transform="matrix(-0.989950,0.141421,-0.141421,-0.989950,162.130661,0.707107)">
             <path
               id="g-svg-76"
               fill="rgba(24,144,255,1)"
-              d="M 0,5 L 10,0 L 10,10 Z"
-              transform="translate(-5,-5)"
+              d="M 0,4 L 8,0 L 8,8 Z"
+              transform="translate(-4,-4)"
               stroke-width="1"
               stroke="rgba(24,144,255,1)"
-              width="10"
-              height="10"
+              width="8"
+              height="8"
               stroke-dasharray="0,0"
             />
           </g>
@@ -730,20 +730,20 @@
           <path
             id="key"
             fill="none"
-            d="M 0,0 L 115.47621266587501,19.246035444312493"
+            d="M 0,0 L 116.46260658970715,19.41043443161785"
             stroke-width="2"
             stroke="rgba(24,144,255,1)"
           />
-          <g transform="matrix(-0.986394,-0.164399,0.164399,-0.986394,115.476212,19.246035)">
+          <g transform="matrix(-0.986394,-0.164399,0.164399,-0.986394,116.462608,19.410435)">
             <path
               id="g-svg-89"
               fill="rgba(24,144,255,1)"
-              d="M 0,5 L 10,0 L 10,10 Z"
-              transform="translate(-5,-5)"
+              d="M 0,4 L 8,0 L 8,8 Z"
+              transform="translate(-4,-4)"
               stroke-width="1"
               stroke="rgba(24,144,255,1)"
-              width="10"
-              height="10"
+              width="8"
+              height="8"
               stroke-dasharray="0,0"
             />
           </g>
@@ -841,20 +841,20 @@
           <path
             id="key"
             fill="none"
-            d="M 0,0 L 140,7.347880794884119e-16"
+            d="M 0,0 L 141,6.123233995736766e-16"
             stroke-width="2"
             stroke="rgba(24,144,255,1)"
           />
-          <g transform="matrix(-1,0,-0,-1,140,0)">
+          <g transform="matrix(-1,0,-0,-1,141,0)">
             <path
               id="g-svg-102"
               fill="rgba(24,144,255,1)"
-              d="M 0,5 L 10,0 L 10,10 Z"
-              transform="translate(-5,-5)"
+              d="M 0,4 L 8,0 L 8,8 Z"
+              transform="translate(-4,-4)"
               stroke-width="1"
               stroke="rgba(24,144,255,1)"
-              width="10"
-              height="10"
+              width="8"
+              height="8"
               stroke-dasharray="0,0"
             />
           </g>
@@ -949,20 +949,20 @@
           <path
             id="key"
             fill="none"
-            d="M 0,0 L 90,7.347880794884119e-16"
+            d="M 0,0 L 91,6.123233995736766e-16"
             stroke-width="2"
             stroke="rgba(24,144,255,1)"
           />
-          <g transform="matrix(-1,0,-0,-1,90,0)">
+          <g transform="matrix(-1,0,-0,-1,91,0)">
             <path
               id="g-svg-115"
               fill="rgba(24,144,255,1)"
-              d="M 0,5 L 10,0 L 10,10 Z"
-              transform="translate(-5,-5)"
+              d="M 0,4 L 8,0 L 8,8 Z"
+              transform="translate(-4,-4)"
               stroke-width="1"
               stroke="rgba(24,144,255,1)"
-              width="10"
-              height="10"
+              width="8"
+              height="8"
               stroke-dasharray="0,0"
             />
           </g>
@@ -1056,20 +1056,20 @@
           <path
             id="key"
             fill="none"
-            d="M 0,20.232429368144608 L 115.47621266587501,0.9863939238321422"
+            d="M 0,20.232429368144608 L 116.46260658970715,0.8219949365267852"
             stroke-width="2"
             stroke="rgba(24,144,255,1)"
           />
-          <g transform="matrix(-0.986394,0.164399,-0.164399,-0.986394,115.476212,0.986394)">
+          <g transform="matrix(-0.986394,0.164399,-0.164399,-0.986394,116.462608,0.821995)">
             <path
               id="g-svg-128"
               fill="rgba(24,144,255,1)"
-              d="M 0,5 L 10,0 L 10,10 Z"
-              transform="translate(-5,-5)"
+              d="M 0,4 L 8,0 L 8,8 Z"
+              transform="translate(-4,-4)"
               stroke-width="1"
               stroke="rgba(24,144,255,1)"
-              width="10"
-              height="10"
+              width="8"
+              height="8"
               stroke-dasharray="0,0"
             />
           </g>
@@ -1164,20 +1164,20 @@
           <path
             id="key"
             fill="none"
-            d="M 0,22.425215392592804 C 64.1844536847118 -8.51675373329897,70.74259292702584 30.941969125891774,134.92704661173758 0 L 129.52229924665264,2.6055145210893462"
+            d="M 0,22.425215392592804 C 64.1844536847118 -8.51675373329897,70.74259292702584 30.941969125891774,134.92704661173758 0 L 130.4230904741668,2.171262100907789"
             stroke-width="2"
             stroke="rgba(24,144,255,1)"
           />
-          <g transform="matrix(-0.900791,0.434252,-0.434252,-0.900791,129.522293,2.605515)">
+          <g transform="matrix(-0.900791,0.434252,-0.434252,-0.900791,130.423096,2.171262)">
             <path
               id="g-svg-141"
               fill="rgba(24,144,255,1)"
-              d="M 0,5 L 10,0 L 10,10 Z"
-              transform="translate(-5,-5)"
+              d="M 0,4 L 8,0 L 8,8 Z"
+              transform="translate(-4,-4)"
               stroke-width="1"
               stroke="rgba(24,144,255,1)"
-              width="10"
-              height="10"
+              width="8"
+              height="8"
               stroke-dasharray="0,0"
             />
           </g>

packages/g6/__tests__/integration/snapshots/static/edge-quadratic.svg

@@ -26,11 +26,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,49.868023,253.100952)">
+          <g transform="matrix(1,0,0,1,45.943867,252.325714)">
             <path
               id="key"
               fill="none"
-              d="M 184.43535068392123,0 Q 98.03197310047064 47.64930594849599,0 36.43626598467259 L 5.961131623097586,37.11810890801046"
+              d="M 192.28366347223044,0 Q 101.95612949462526 48.42454564963066,0 37.98674538694195 L 4.974002368006284,38.495960904250566"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
@@ -41,27 +41,27 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(0.993522,0.113640,-0.113640,0.993522,5.961132,37.118111)">
+            <g transform="matrix(0.994800,0.101843,-0.101843,0.994800,4.974002,38.495960)">
               <path
                 id="g-svg-23"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-23"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -69,7 +69,7 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.986723,-0.162414,0.162414,0.986723,141.045959,286.684326)"
+            transform="matrix(0.986510,-0.163699,0.163699,0.986510,141.046799,286.689453)"
           >
             <g transform="matrix(1,0,0,1,-33.360001,-11.500000)">
               <path
@@ -112,11 +112,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,260.876526,100.383797)">
+          <g transform="matrix(1,0,0,1,258.157410,97.450142)">
             <path
               id="halo"
               fill="none"
-              d="M 0,137.88159958233672 Q 41.89727945222688 48.54729149779831,127.79932316871259 0"
+              d="M 0,143.74890148423788 Q 44.61641389134286 51.48094244874889,133.23759204694454 0"
               stroke-width="12"
               stroke="rgba(153,173,209,1)"
               stroke-dasharray="0,0"
@@ -126,7 +126,7 @@
             <path
               id="halo"
               fill="none"
-              d="M 0,137.88159958233672 Q 41.89727945222688 48.54729149779831,127.79932316871259 0"
+              d="M 0,143.74890148423788 Q 44.61641389134286 51.48094244874889,133.23759204694454 0"
               stroke-width="14"
               stroke="transparent"
               stroke-dasharray="0,0"
@@ -134,11 +134,11 @@
               stroke-opacity="0.25"
             />
           </g>
-          <g transform="matrix(1,0,0,1,260.876526,100.383797)">
+          <g transform="matrix(1,0,0,1,258.157410,97.450142)">
             <path
               id="key"
               fill="none"
-              d="M 0,137.88159958233672 Q 41.89727945222688 48.54729149779831,127.79932316871259 0 L 122.5757888766107,2.9520652938638867"
+              d="M 0,143.74890148423788 Q 44.61641389134286 51.48094244874889,133.23759204694454 0 L 128.91414490536226,2.5115343545219626"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
@@ -149,27 +149,27 @@
               stroke-width="3"
               stroke="transparent"
             />
-            <g transform="matrix(-0.870589,0.492011,-0.492011,-0.870589,122.575790,2.952065)">
+            <g transform="matrix(-0.864689,0.502307,-0.502307,-0.864689,128.914139,2.511534)">
               <path
                 id="g-svg-30"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-30"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -177,7 +177,7 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.702830,-0.711357,0.711357,0.702830,316.586304,156.282410)"
+            transform="matrix(0.701908,-0.712268,0.712268,0.701908,316.582642,156.278763)"
           >
             <g transform="matrix(1,0,0,1,-30.480000,-11.500000)">
               <path
@@ -220,11 +220,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,225.757263,265.886627)">
+          <g transform="matrix(1,0,0,1,225.281906,261.914978)">
             <path
               id="halo"
               fill="none"
-              d="M 22.341351465411776,0 Q 40.9580891316175 96.89900865517978,0 186.6677990802234"
+              d="M 23.292047229429897,0 Q 41.43343701362656 100.8706637750347,0 194.61110931993323"
               stroke-width="12"
               stroke="rgba(153,173,209,1)"
               stroke-dasharray="0,0"
@@ -234,7 +234,7 @@
             <path
               id="halo"
               fill="none"
-              d="M 22.341351465411776,0 Q 40.9580891316175 96.89900865517978,0 186.6677990802234"
+              d="M 23.292047229429897,0 Q 41.43343701362656 100.8706637750347,0 194.61110931993323"
               stroke-width="14"
               stroke="transparent"
               stroke-dasharray="0,0"
@@ -242,11 +242,11 @@
               stroke-opacity="0.25"
             />
           </g>
-          <g transform="matrix(1,0,0,1,225.757263,265.886627)">
+          <g transform="matrix(1,0,0,1,225.281906,261.914978)">
             <path
               id="key"
               fill="none"
-              d="M 22.341351465411776,0 Q 40.9580891316175 96.89900865517978,0 186.6677990802234 L 2.4905808052780323,181.20913557599633"
+              d="M 23.292047229429897,0 Q 41.43343701362656 100.8706637750347,0 194.61110931993323 L 2.0213596457476473,190.03791512084842"
               stroke-width="2"
               stroke="rgba(153,173,209,1)"
             />
@@ -257,27 +257,27 @@
               stroke-width="2"
               stroke="transparent"
             />
-            <g transform="matrix(0.415097,-0.909777,0.909777,0.415097,2.490581,181.209137)">
+            <g transform="matrix(0.404272,-0.914639,0.914639,0.404272,2.021360,190.037918)">
               <path
                 id="g-svg-37"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-37"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -285,7 +285,7 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.150446,-0.988618,0.988618,0.150446,251.219849,364.957550)"
+            transform="matrix(0.149167,-0.988812,0.988812,0.149167,251.224976,364.958344)"
           >
             <g transform="matrix(1,0,0,1,-44.099998,-13.500000)">
               <path
@@ -329,11 +329,11 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,150.559753,71.877472)">
+          <g transform="matrix(1,0,0,1,148.609940,68.384872)">
             <path
               id="key"
               fill="none"
-              d="M 91.64101585980438,164.15213670897606 Q 19.62601794576352 96.69963476186136,0 0 L 1.193419584883427,5.880114768813332"
+              d="M 95.54063356843727,171.1373340380797 Q 21.575826800079966 100.19223342641318,0 0 L 1.0525920757211575,4.887949459858298"
               stroke-width="2"
               stroke="rgba(153,173,209,1)"
             />
@@ -344,27 +344,27 @@
               stroke-width="2"
               stroke="transparent"
             />
-            <g transform="matrix(0.198903,0.980019,-0.980019,0.198903,1.193420,5.880115)">
+            <g transform="matrix(0.210518,0.977590,-0.977590,0.210518,1.052592,4.887949)">
               <path
                 id="g-svg-44"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-44"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -372,7 +372,7 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.459353,0.888254,-0.888254,0.459353,181.445602,157.712311)"
+            transform="matrix(0.460512,0.887653,-0.887653,0.460512,181.440964,157.714706)"
           >
             <g transform="matrix(1,0,0,1,-38.279999,-11.500000)">
               <path
@@ -416,13 +416,14 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,264.521545,256.717529)">
+          <g transform="matrix(1,0,0,1,260.891144,255.038147)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 Q 97.9093493727816 12.237573084088638,170.62798749859712 78.93089028091504 L 166.20610977167962,74.87540049937311"
+              d="M 0,0 Q 101.53973231363074 13.916953833886282,177.8887533802955 82.28965178051044 L 174.164011820603,78.95404084493964"
               stroke-width="1"
-              stroke="rgba(210,218,233,1)"
+              stroke="rgba(153,173,209,1)"
+              opacity="0.25"
             />
             <path
               id="key"
@@ -430,28 +431,29 @@
               d="M 0,0 Q 0 0,0 0"
               stroke-width="3"
               stroke="transparent"
+              opacity="0.25"
             />
-            <g transform="matrix(-0.736980,-0.675915,0.675915,-0.736980,166.206116,74.875397)">
+            <g transform="matrix(-0.744948,-0.667122,0.667122,-0.744948,174.164017,78.954041)">
               <path
                 id="g-svg-51"
                 fill="rgba(153,173,209,1)"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="1"
                 stroke="rgba(153,173,209,1)"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
               <path
                 id="g-svg-51"
                 fill="transparent"
-                d="M 0,5 L 10,0 L 10,10 Z"
-                transform="translate(-5,-5)"
+                d="M 0,4 L 8,0 L 8,8 Z"
+                transform="translate(-4,-4)"
                 stroke-width="3"
                 stroke="transparent"
-                width="10"
-                height="10"
+                width="8"
+                height="8"
                 stroke-dasharray="0,0"
               />
             </g>
@@ -459,7 +461,7 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.893743,0.448580,-0.448580,0.893743,359.708191,284.363342)"
+            transform="matrix(0.894323,0.447422,-0.447422,0.894323,359.710510,284.358734)"
           >
             <g transform="matrix(1,0,0,1,-35.639999,-11.500000)">
               <path
@@ -481,6 +483,7 @@
                 dx="0.5"
                 font-size="12"
                 text-anchor="middle"
+                opacity="0.25"
               >
                 line-inactive
               </text>
@@ -493,13 +496,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -511,13 +512,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -529,13 +528,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -547,13 +544,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -565,13 +560,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -583,13 +576,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>

packages/g6/__tests__/integration/snapshots/static/element-label-background.svg

@@ -26,18 +26,18 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,157.155411,114.310837)">
+          <g transform="matrix(1,0,0,1,155.366562,110.733124)">
             <path
               id="key"
               fill="none"
-              d="M 85.68916494400133,0 L 0,171.37832988800267"
+              d="M 89.26687370800101,0 L 0,178.53374741600203"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
             <path
               id="key"
               fill="none"
-              d="M 85.68916494400133,0 L 0,171.37832988800267"
+              d="M 89.26687370800101,0 L 0,178.53374741600203"
               stroke-width="3"
               stroke="transparent"
             />
@@ -45,20 +45,8 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.447220,-0.894424,0.894424,0.447220,198.211121,203.577698)"
+            transform="matrix(0.447214,-0.894427,0.894427,0.447214,198.211151,203.577713)"
           >
-            <g transform="matrix(1,0,0,1,-17.340000,5)">
-              <path
-                id="background"
-                fill="rgba(238,238,238,1)"
-                d="M 2,0 l 31.68,0 a 2,2,0,0,1,2,2 l 0,19 a 2,2,0,0,1,-2,2 l -31.68,0 a 2,2,0,0,1,-2,-2 l 0,-19 a 2,2,0,0,1,2,-2 z"
-                opacity="0.75"
-                stroke-width="0"
-                stroke="rgba(158,201,255,1)"
-                width="35.68"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -92,18 +80,18 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,259.600006,112.800003)">
+          <g transform="matrix(1,0,0,1,257.200012,109.599998)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 130.79999999999995,174.39999999999998"
+              d="M 0,0 L 135.60000000000002,180.79999999999998"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 130.79999999999995,174.39999999999998"
+              d="M 0,0 L 135.60000000000002,180.79999999999998"
               stroke-width="3"
               stroke="transparent"
             />
@@ -111,20 +99,8 @@
           <g
             id="label"
             fill="none"
-            transform="matrix(0.600003,0.799997,-0.799997,0.600003,327.400024,203.199997)"
+            transform="matrix(0.600005,0.799996,-0.799996,0.600005,327.400024,203.199982)"
           >
-            <g transform="matrix(1,0,0,1,-18.180000,5)">
-              <path
-                id="background"
-                fill="rgba(238,238,238,1)"
-                d="M 2,0 l 33.36,0 a 2,2,0,0,1,2,2 l 0,19 a 2,2,0,0,1,-2,2 l -33.36,0 a 2,2,0,0,1,-2,-2 l 0,-19 a 2,2,0,0,1,2,-2 z"
-                opacity="0.75"
-                stroke-width="0"
-                stroke="rgba(158,201,255,1)"
-                width="37.36"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -158,35 +134,23 @@
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,166,300)">
+          <g transform="matrix(1,0,0,1,162,300)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 218,0"
+              d="M 0,0 L 226,0"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 218,0"
+              d="M 0,0 L 226,0"
               stroke-width="3"
               stroke="transparent"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,279,300)">
-            <g transform="matrix(1,0,0,1,-18.299999,5)">
-              <path
-                id="background"
-                fill="rgba(238,238,238,1)"
-                d="M 2,0 l 33.6,0 a 2,2,0,0,1,2,2 l 0,19 a 2,2,0,0,1,-2,2 l -33.6,0 a 2,2,0,0,1,-2,-2 l 0,-19 a 2,2,0,0,1,2,-2 z"
-                opacity="0.75"
-                stroke-width="0"
-                stroke="rgba(158,201,255,1)"
-                width="37.6"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -211,16 +175,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
-          <g id="label" fill="none" transform="matrix(1,0,0,1,0,16)">
+          <g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
             <g transform="matrix(1,0,0,1,-17.340000,0)">
               <path
                 id="background"
@@ -254,16 +216,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
-          <g id="label" fill="none" transform="matrix(1,0,0,1,0,16)">
+          <g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
             <g transform="matrix(1,0,0,1,-18.180000,0)">
               <path
                 id="background"
@@ -297,16 +257,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              fill="rgba(23,131,255,1)"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
-          <g id="label" fill="none" transform="matrix(1,0,0,1,0,16)">
+          <g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
             <g transform="matrix(1,0,0,1,-18.299999,0)">
               <path
                 id="background"

packages/g6/__tests__/integration/snapshots/static/element-label-oversized.svg

@@ -80,11 +80,9 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               d="M 0,0 l 100,0 l 0,100 l-100 0 z"
               transform="translate(-50,-50)"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               width="100"
               height="100"
             />
@@ -128,11 +126,9 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               d="M 0,0 l 150,0 l 0,150 l-150 0 z"
               transform="translate(-75,-75)"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               width="150"
               height="150"
             />

packages/g6/__tests__/integration/snapshots/static/graph-element.svg

@@ -15,70 +15,70 @@
             <circle
               id="key"
               fill="rgba(247,251,255,1)"
-              transform="translate(-36.76955262170047,-36.76955262170047)"
-              cx="36.76955262170047"
-              cy="36.76955262170047"
+              transform="translate(-31.11269837220809,-31.11269837220809)"
+              cx="31.11269837220809"
+              cy="31.11269837220809"
               stroke-dasharray="0,0"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
-              r="36.76955262170047"
+              r="31.11269837220809"
             />
           </g>
         </g>
       </g>
       <g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
         <g
-          id="node-1-node-2"
+          id="edge-1"
           fill="none"
           marker-start="false"
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
           <g
-            id="node-1-node-2"
+            id="edge-1"
             fill="none"
             marker-start="false"
             marker-end="false"
             stroke="transparent"
             stroke-width="3"
           />
-          <g transform="matrix(1,0,0,1,116,100)">
+          <g transform="matrix(1,0,0,1,112,100)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 18,0"
+              d="M 0,0 L 26,0"
               stroke-width="1"
               stroke="rgba(127,39,4,1)"
             />
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 18,0"
+              d="M 0,0 L 26,0"
               stroke-width="3"
               stroke="transparent"
             />
           </g>
         </g>
         <g
-          id="node-2-node-3"
+          id="edge-2"
           fill="none"
           marker-start="false"
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
           <g
-            id="node-2-node-3"
+            id="edge-2"
             fill="none"
             marker-start="false"
             marker-end="false"
             stroke="transparent"
             stroke-width="6"
           />
-          <g transform="matrix(1,0,0,1,132.155411,114.310837)">
+          <g transform="matrix(1,0,0,1,130.366562,110.733124)">
             <path
               id="halo"
               fill="none"
-              d="M 10.689164944001334,0 L 0,21.378329888002682"
+              d="M 14.266873708001015,0 L 0,28.53374741600203"
               stroke-width="12"
               stroke="rgba(166,54,3,1)"
               stroke-dasharray="0,0"
@@ -88,7 +88,7 @@
             <path
               id="halo"
               fill="none"
-              d="M 10.689164944001334,0 L 0,21.378329888002682"
+              d="M 14.266873708001015,0 L 0,28.53374741600203"
               stroke-width="14"
               stroke="transparent"
               stroke-dasharray="0,0"
@@ -96,18 +96,18 @@
               stroke-opacity="0.25"
             />
           </g>
-          <g transform="matrix(1,0,0,1,132.155411,114.310837)">
+          <g transform="matrix(1,0,0,1,130.366562,110.733124)">
             <path
               id="key"
               fill="none"
-              d="M 10.689164944001334,0 L 0,21.378329888002682"
+              d="M 14.266873708001015,0 L 0,28.53374741600203"
               stroke-width="4"
               stroke="rgba(166,54,3,1)"
             />
             <path
               id="key"
               fill="none"
-              d="M 10.689164944001334,0 L 0,21.378329888002682"
+              d="M 14.266873708001015,0 L 0,28.53374741600203"
               stroke-width="6"
               stroke="transparent"
             />
@@ -120,12 +120,12 @@
             <circle
               id="key"
               fill="rgba(158,1,66,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="1"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
               stroke="rgba(255,192,203,1)"
-              r="16"
+              stroke-width="1"
+              r="12"
             />
           </g>
         </g>
@@ -134,12 +134,10 @@
             <circle
               id="key"
               fill="rgba(213,62,79,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
-              r="16"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
+              r="12"
             />
           </g>
         </g>
@@ -148,12 +146,12 @@
             <circle
               id="halo"
               fill="none"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
               stroke-width="12"
               stroke="rgba(244,109,67,1)"
-              r="16"
+              r="12"
               stroke-dasharray="0,0"
               stroke-opacity="0.25"
               pointer-events="none"
@@ -163,12 +161,12 @@
             <circle
               id="key"
               fill="rgba(244,109,67,1)"
-              transform="translate(-16,-16)"
-              cx="16"
-              cy="16"
+              transform="translate(-12,-12)"
+              cx="12"
+              cy="12"
               stroke-width="3"
               stroke="rgba(0,0,0,1)"
-              r="16"
+              r="12"
             />
           </g>
         </g>

packages/g6/__tests__/integration/snapshots/static/node-circle.svg

@@ -20,27 +20,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-20,-20)"
               cx="20"
               cy="20"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="20"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-15.780000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 32.56,0 l 0,23 l-32.56 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="32.56"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -91,10 +78,10 @@
               transform="translate(-20,-20)"
               cx="20"
               cy="20"
-              stroke-width="12"
-              stroke="rgba(34,126,255,1)"
               r="20"
+              stroke="rgba(23,131,255,1)"
               stroke-dasharray="0,0"
+              stroke-width="12"
               stroke-opacity="0.25"
               pointer-events="none"
             />
@@ -102,27 +89,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-20,-20)"
               cx="20"
               cy="20"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="20"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-30.780001,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 62.56,0 l 0,23 l-62.56 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="62.56"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -169,27 +143,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-20,-20)"
               cx="20"
               cy="20"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="20"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-40.020000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 81.04,0 l 0,23 l-81.04 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="81.04"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -260,7 +221,7 @@
               <g transform="matrix(1,0,0,1,-4,-9.500000)">
                 <path
                   id="background"
-                  fill="rgba(248,98,84,1)"
+                  fill="rgba(245,34,45,1)"
                   d="M 9.5,0 l 27.520000000000003,0 a 9.5,9.5,0,0,1,9.5,9.5 l 0,0 a 9.5,9.5,0,0,1,-9.5,9.5 l -27.520000000000003,0 a 9.5,9.5,0,0,1,-9.5,-9.5 l 0,0 a 9.5,9.5,0,0,1,9.5,-9.5 z"
                   stroke-width="0"
                   width="46.52"
@@ -287,7 +248,7 @@
               <g transform="matrix(1,0,0,1,-4,-18)">
                 <path
                   id="background"
-                  fill="rgba(237,183,75,1)"
+                  fill="rgba(250,173,20,1)"
                   d="M 9.5,0 l 15.120000000000005,0 a 9.5,9.5,0,0,1,9.5,9.5 l 0,0 a 9.5,9.5,0,0,1,-9.5,9.5 l -15.120000000000005,0 a 9.5,9.5,0,0,1,-9.5,-9.5 l 0,0 a 9.5,9.5,0,0,1,9.5,-9.5 z"
                   stroke-width="0"
                   width="34.120000000000005"
@@ -319,27 +280,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-20,-20)"
               cx="20"
               cy="20"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="20"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-33.840000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 68.68,0 l 0,23 l-68.68 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="68.68"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -380,7 +328,7 @@
           <g transform="matrix(1,0,0,1,-20,0)">
             <circle
               id="port-0"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -393,7 +341,7 @@
           <g transform="matrix(1,0,0,1,20,0)">
             <circle
               id="port-1"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -406,7 +354,7 @@
           <g transform="matrix(1,0,0,1,0,-20)">
             <circle
               id="port-2"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -419,7 +367,7 @@
           <g transform="matrix(1,0,0,1,0,20)">
             <circle
               id="port-3"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -438,10 +386,10 @@
               transform="translate(-20,-20)"
               cx="20"
               cy="20"
-              stroke-width="12"
-              stroke="rgba(34,126,255,1)"
               r="20"
+              stroke="rgba(23,131,255,1)"
               stroke-dasharray="0,0"
+              stroke-width="12"
               stroke-opacity="0.25"
               pointer-events="none"
             />
@@ -449,27 +397,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-20,-20)"
               cx="20"
               cy="20"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="20"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-36.060001,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 73.11999999999999,0 l 0,23 l-73.11999999999999 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="73.11999999999999"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -521,7 +456,7 @@
               cx="20"
               cy="20"
               stroke-width="12"
-              stroke="rgba(34,126,255,1)"
+              stroke="rgba(23,131,255,1)"
               r="20"
               stroke-dasharray="0,0"
               stroke-opacity="0.25"
@@ -531,27 +466,16 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-20,-20)"
               cx="20"
               cy="20"
+              r="20"
               stroke-width="3"
               stroke="rgba(0,0,0,1)"
-              r="20"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-50.610001,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 102.22,0 l 0,27 l-102.22 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="102.22"
-                height="27"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -599,28 +523,17 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-20,-20)"
               cx="20"
               cy="20"
+              r="20"
               stroke-width="3"
               stroke="rgba(0,0,0,1)"
-              r="20"
               stroke-opacity="0.85"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-43.860001,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 88.72000000000001,0 l 0,23 l-88.72000000000001 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="88.72000000000001"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -668,28 +581,15 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-20,-20)"
               cx="20"
               cy="20"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="20"
               opacity="0.25"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-41.220001,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 83.44,0 l 0,23 l-83.44 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="83.44"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -742,23 +642,10 @@
               transform="translate(-20,-20)"
               cx="20"
               cy="20"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="20"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-43.200001,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 87.4,0 l 0,23 l-87.4 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="87.4"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -769,6 +656,7 @@
                 dy="11.5px"
                 font-size="12"
                 text-anchor="middle"
+                opacity="0.25"
               >
                 circle-disabled
               </text>

packages/g6/__tests__/integration/snapshots/static/node-diamond.svg

@@ -20,24 +20,11 @@
           <g transform="matrix(1,0,0,1,-20,-20)">
             <polygon
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               points="20,0 40,20 20,40 0,20"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-24.959999,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 50.92000000000001,0 l 0,23 l-50.92000000000001 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="50.92000000000001"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -86,9 +73,9 @@
               id="halo"
               fill="none"
               points="20,0 40,20 20,40 0,20"
-              stroke-width="12"
-              stroke="rgba(34,126,255,1)"
+              stroke="rgba(23,131,255,1)"
               stroke-dasharray="0,0"
+              stroke-width="12"
               stroke-opacity="0.25"
               pointer-events="none"
             />
@@ -96,24 +83,11 @@
           <g transform="matrix(1,0,0,1,-20,-20)">
             <polygon
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               points="20,0 40,20 20,40 0,20"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-39.959999,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 80.92000000000002,0 l 0,23 l-80.92000000000002 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="80.92000000000002"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -160,24 +134,11 @@
           <g transform="matrix(1,0,0,1,-20,-20)">
             <polygon
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               points="20,0 40,20 20,40 0,20"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-49.200001,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 99.4,0 l 0,23 l-99.4 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="99.4"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -248,7 +209,7 @@
               <g transform="matrix(1,0,0,1,-4,-9.500000)">
                 <path
                   id="background"
-                  fill="rgba(248,98,84,1)"
+                  fill="rgba(245,34,45,1)"
                   d="M 9.5,0 l 27.520000000000003,0 a 9.5,9.5,0,0,1,9.5,9.5 l 0,0 a 9.5,9.5,0,0,1,-9.5,9.5 l -27.520000000000003,0 a 9.5,9.5,0,0,1,-9.5,-9.5 l 0,0 a 9.5,9.5,0,0,1,9.5,-9.5 z"
                   stroke-width="0"
                   width="46.52"
@@ -275,7 +236,7 @@
               <g transform="matrix(1,0,0,1,-4,-18)">
                 <path
                   id="background"
-                  fill="rgba(237,183,75,1)"
+                  fill="rgba(250,173,20,1)"
                   d="M 9.5,0 l 15.120000000000005,0 a 9.5,9.5,0,0,1,9.5,9.5 l 0,0 a 9.5,9.5,0,0,1,-9.5,9.5 l -15.120000000000005,0 a 9.5,9.5,0,0,1,-9.5,-9.5 l 0,0 a 9.5,9.5,0,0,1,9.5,-9.5 z"
                   stroke-width="0"
                   width="34.120000000000005"
@@ -307,24 +268,11 @@
           <g transform="matrix(1,0,0,1,-20,-20)">
             <polygon
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               points="20,0 40,20 20,40 0,20"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-43.020000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 87.04,0 l 0,23 l-87.04 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="87.04"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -365,7 +313,7 @@
           <g transform="matrix(1,0,0,1,-20,0)">
             <circle
               id="port-0"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -378,7 +326,7 @@
           <g transform="matrix(1,0,0,1,20,0)">
             <circle
               id="port-1"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -391,7 +339,7 @@
           <g transform="matrix(1,0,0,1,0,-20)">
             <circle
               id="port-2"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -404,7 +352,7 @@
           <g transform="matrix(1,0,0,1,0,20)">
             <circle
               id="port-3"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -421,9 +369,9 @@
               id="halo"
               fill="none"
               points="20,0 40,20 20,40 0,20"
-              stroke-width="12"
-              stroke="rgba(34,126,255,1)"
+              stroke="rgba(23,131,255,1)"
               stroke-dasharray="0,0"
+              stroke-width="12"
               stroke-opacity="0.25"
               pointer-events="none"
             />
@@ -431,24 +379,11 @@
           <g transform="matrix(1,0,0,1,-20,-20)">
             <polygon
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               points="20,0 40,20 20,40 0,20"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-45.240002,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 91.48,0 l 0,23 l-91.48 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="91.48"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -498,7 +433,7 @@
               fill="none"
               points="20,0 40,20 20,40 0,20"
               stroke-width="12"
-              stroke="rgba(34,126,255,1)"
+              stroke="rgba(23,131,255,1)"
               stroke-dasharray="0,0"
               stroke-opacity="0.25"
               pointer-events="none"
@@ -507,24 +442,13 @@
           <g transform="matrix(1,0,0,1,-20,-20)">
             <polygon
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               points="20,0 40,20 20,40 0,20"
               stroke-width="3"
               stroke="rgba(0,0,0,1)"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-59.360001,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 119.72000000000003,0 l 0,27 l-119.72000000000003 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="119.72000000000003"
-                height="27"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -537,7 +461,7 @@
                 text-anchor="middle"
                 font-weight="700"
               >
-                diamond-select...
+                diamond-selected
               </text>
             </g>
           </g>
@@ -572,7 +496,7 @@
           <g transform="matrix(1,0,0,1,-20,-20)">
             <polygon
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               points="20,0 40,20 20,40 0,20"
               stroke-width="3"
               stroke="rgba(0,0,0,1)"
@@ -580,17 +504,6 @@
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-53.040001,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 107.08000000000003,0 l 0,23 l-107.08000000000003 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="107.08000000000003"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -638,25 +551,12 @@
           <g transform="matrix(1,0,0,1,-20,-20)">
             <polygon
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               points="20,0 40,20 20,40 0,20"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               opacity="0.25"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-50.400002,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 101.8,0 l 0,23 l-101.8 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="101.8"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -707,22 +607,9 @@
               id="key"
               fill="rgba(240,240,240,1)"
               points="20,0 40,20 20,40 0,20"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-52.380001,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 105.76000000000002,0 l 0,23 l-105.76000000000002 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="105.76000000000002"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -733,6 +620,7 @@
                 dy="11.5px"
                 font-size="12"
                 text-anchor="middle"
+                opacity="0.25"
               >
                 diamond-disabled
               </text>

packages/g6/__tests__/integration/snapshots/static/node-ellipse.svg

@@ -20,28 +20,15 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <ellipse
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-22.5,-17.5)"
               cx="22.5"
               cy="17.5"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               rx="22.5"
               ry="17.5"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,17.500000)">
-            <g transform="matrix(1,0,0,1,-18.600000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 38.2,0 l 0,23 l-38.2 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="38.2"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -92,11 +79,11 @@
               transform="translate(-22.5,-17.5)"
               cx="22.5"
               cy="17.5"
-              stroke-width="12"
-              stroke="rgba(34,126,255,1)"
               rx="22.5"
               ry="17.5"
+              stroke="rgba(23,131,255,1)"
               stroke-dasharray="0,0"
+              stroke-width="12"
               stroke-opacity="0.25"
               pointer-events="none"
             />
@@ -104,28 +91,15 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <ellipse
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-22.5,-17.5)"
               cx="22.5"
               cy="17.5"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               rx="22.5"
               ry="17.5"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,17.500000)">
-            <g transform="matrix(1,0,0,1,-33.599998,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 68.2,0 l 0,23 l-68.2 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="68.2"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -172,28 +146,15 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <ellipse
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-22.5,-17.5)"
               cx="22.5"
               cy="17.5"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               rx="22.5"
               ry="17.5"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,17.500000)">
-            <g transform="matrix(1,0,0,1,-42.840000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 86.67999999999999,0 l 0,23 l-86.67999999999999 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="86.67999999999999"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -268,7 +229,7 @@
               <g transform="matrix(1,0,0,1,-4,-9.500000)">
                 <path
                   id="background"
-                  fill="rgba(248,98,84,1)"
+                  fill="rgba(245,34,45,1)"
                   d="M 9.5,0 l 27.520000000000003,0 a 9.5,9.5,0,0,1,9.5,9.5 l 0,0 a 9.5,9.5,0,0,1,-9.5,9.5 l -27.520000000000003,0 a 9.5,9.5,0,0,1,-9.5,-9.5 l 0,0 a 9.5,9.5,0,0,1,9.5,-9.5 z"
                   stroke-width="0"
                   width="46.52"
@@ -299,7 +260,7 @@
               <g transform="matrix(1,0,0,1,-4,-18)">
                 <path
                   id="background"
-                  fill="rgba(237,183,75,1)"
+                  fill="rgba(250,173,20,1)"
                   d="M 9.5,0 l 15.120000000000005,0 a 9.5,9.5,0,0,1,9.5,9.5 l 0,0 a 9.5,9.5,0,0,1,-9.5,9.5 l -15.120000000000005,0 a 9.5,9.5,0,0,1,-9.5,-9.5 l 0,0 a 9.5,9.5,0,0,1,9.5,-9.5 z"
                   stroke-width="0"
                   width="34.120000000000005"
@@ -331,28 +292,15 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <ellipse
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-22.5,-17.5)"
               cx="22.5"
               cy="17.5"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               rx="22.5"
               ry="17.5"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,17.500000)">
-            <g transform="matrix(1,0,0,1,-36.660000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 74.32000000000001,0 l 0,23 l-74.32000000000001 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="74.32000000000001"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -393,7 +341,7 @@
           <g transform="matrix(1,0,0,1,-22.500000,0)">
             <circle
               id="port-0"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -406,7 +354,7 @@
           <g transform="matrix(1,0,0,1,22.500000,0)">
             <circle
               id="port-1"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -419,7 +367,7 @@
           <g transform="matrix(1,0,0,1,0,-17.500000)">
             <circle
               id="port-2"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -432,7 +380,7 @@
           <g transform="matrix(1,0,0,1,0,17.500000)">
             <circle
               id="port-3"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -451,11 +399,11 @@
               transform="translate(-22.5,-17.5)"
               cx="22.5"
               cy="17.5"
-              stroke-width="12"
-              stroke="rgba(34,126,255,1)"
               rx="22.5"
               ry="17.5"
+              stroke="rgba(23,131,255,1)"
               stroke-dasharray="0,0"
+              stroke-width="12"
               stroke-opacity="0.25"
               pointer-events="none"
             />
@@ -463,28 +411,15 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <ellipse
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-22.5,-17.5)"
               cx="22.5"
               cy="17.5"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               rx="22.5"
               ry="17.5"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,17.500000)">
-            <g transform="matrix(1,0,0,1,-38.880001,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 78.75999999999999,0 l 0,23 l-78.75999999999999 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="78.75999999999999"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -536,7 +471,7 @@
               cx="22.5"
               cy="17.5"
               stroke-width="12"
-              stroke="rgba(34,126,255,1)"
+              stroke="rgba(23,131,255,1)"
               rx="22.5"
               ry="17.5"
               stroke-dasharray="0,0"
@@ -547,28 +482,17 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <ellipse
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-22.5,-17.5)"
               cx="22.5"
               cy="17.5"
-              stroke-width="3"
-              stroke="rgba(0,0,0,1)"
               rx="22.5"
               ry="17.5"
+              stroke-width="3"
+              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,17.500000)">
-            <g transform="matrix(1,0,0,1,-53.900002,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 108.80000000000001,0 l 0,27 l-108.80000000000001 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="108.80000000000001"
-                height="27"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -616,29 +540,18 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <ellipse
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-22.5,-17.5)"
               cx="22.5"
               cy="17.5"
-              stroke-width="3"
-              stroke="rgba(0,0,0,1)"
               rx="22.5"
               ry="17.5"
+              stroke-width="3"
+              stroke="rgba(0,0,0,1)"
               stroke-opacity="0.85"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,17.500000)">
-            <g transform="matrix(1,0,0,1,-46.680000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 94.36000000000001,0 l 0,23 l-94.36000000000001 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="94.36000000000001"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -686,29 +599,16 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <ellipse
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-22.5,-17.5)"
               cx="22.5"
               cy="17.5"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               rx="22.5"
               ry="17.5"
               opacity="0.25"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,17.500000)">
-            <g transform="matrix(1,0,0,1,-44.040001,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 89.08,0 l 0,23 l-89.08 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="89.08"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -761,24 +661,11 @@
               transform="translate(-22.5,-17.5)"
               cx="22.5"
               cy="17.5"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               rx="22.5"
               ry="17.5"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,17.500000)">
-            <g transform="matrix(1,0,0,1,-46.020000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 93.04,0 l 0,23 l-93.04 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="93.04"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -789,6 +676,7 @@
                 dy="11.5px"
                 font-size="12"
                 text-anchor="middle"
+                opacity="0.25"
               >
                 ellipse-disabled
               </text>

packages/g6/__tests__/integration/snapshots/static/node-image.svg

@@ -20,30 +20,17 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <image
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               preserveAspectRatio="none"
               x="0"
               y="0"
               href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
               transform="translate(-20,-20)"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-17.400000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 35.8,0 l 0,23 l-35.8 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="35.8"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -71,10 +58,10 @@
               fill="rgba(0,0,0,0)"
               d="M 0,0 l 52,0 l 0,52 l-52 0 z"
               transform="translate(-26,-26)"
-              stroke-width="12"
               width="52"
               height="52"
               stroke-dasharray="0,0"
+              stroke-width="12"
               stroke-opacity="0.25"
               pointer-events="none"
               stroke="rgba(34,126,255,1)"
@@ -83,30 +70,17 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <image
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               preserveAspectRatio="none"
               x="0"
               y="0"
               href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
               transform="translate(-20,-20)"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-32.400002,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 65.8,0 l 0,23 l-65.8 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="65.8"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -131,30 +105,17 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <image
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               preserveAspectRatio="none"
               x="0"
               y="0"
               href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
               transform="translate(-20,-20)"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-41.639999,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 84.28,0 l 0,23 l-84.28 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="84.28"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -203,7 +164,7 @@
               <g transform="matrix(1,0,0,1,-4,-9.500000)">
                 <path
                   id="background"
-                  fill="rgba(248,98,84,1)"
+                  fill="rgba(245,34,45,1)"
                   d="M 9.5,0 l 27.520000000000003,0 a 9.5,9.5,0,0,1,9.5,9.5 l 0,0 a 9.5,9.5,0,0,1,-9.5,9.5 l -27.520000000000003,0 a 9.5,9.5,0,0,1,-9.5,-9.5 l 0,0 a 9.5,9.5,0,0,1,9.5,-9.5 z"
                   stroke-width="0"
                   width="46.52"
@@ -230,7 +191,7 @@
               <g transform="matrix(1,0,0,1,-4,-18)">
                 <path
                   id="background"
-                  fill="rgba(237,183,75,1)"
+                  fill="rgba(250,173,20,1)"
                   d="M 9.5,0 l 15.120000000000005,0 a 9.5,9.5,0,0,1,9.5,9.5 l 0,0 a 9.5,9.5,0,0,1,-9.5,9.5 l -15.120000000000005,0 a 9.5,9.5,0,0,1,-9.5,-9.5 l 0,0 a 9.5,9.5,0,0,1,9.5,-9.5 z"
                   stroke-width="0"
                   width="34.120000000000005"
@@ -262,30 +223,17 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <image
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               preserveAspectRatio="none"
               x="0"
               y="0"
               href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
               transform="translate(-20,-20)"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-35.459999,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 71.92,0 l 0,23 l-71.92 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="71.92"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -304,7 +252,7 @@
           <g transform="matrix(1,0,0,1,-20,0)">
             <circle
               id="port-0"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -317,7 +265,7 @@
           <g transform="matrix(1,0,0,1,20,0)">
             <circle
               id="port-1"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -330,7 +278,7 @@
           <g transform="matrix(1,0,0,1,0,-20)">
             <circle
               id="port-2"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -343,7 +291,7 @@
           <g transform="matrix(1,0,0,1,0,20)">
             <circle
               id="port-3"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -361,10 +309,10 @@
               fill="rgba(0,0,0,0)"
               d="M 0,0 l 52,0 l 0,52 l-52 0 z"
               transform="translate(-26,-26)"
-              stroke-width="12"
               width="52"
               height="52"
               stroke-dasharray="0,0"
+              stroke-width="12"
               stroke-opacity="0.25"
               pointer-events="none"
               stroke="rgba(34,126,255,1)"
@@ -373,30 +321,17 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <image
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               preserveAspectRatio="none"
               x="0"
               y="0"
               href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
               transform="translate(-20,-20)"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-37.680000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 76.35999999999999,0 l 0,23 l-76.35999999999999 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="76.35999999999999"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -436,30 +371,19 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <image
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               preserveAspectRatio="none"
               x="0"
               y="0"
               href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
               transform="translate(-20,-20)"
-              stroke-width="3"
-              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
+              stroke-width="3"
+              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-52.500000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 106,0 l 0,27 l-106 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="106"
-                height="27"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -485,31 +409,20 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <image
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               preserveAspectRatio="none"
               x="0"
               y="0"
               href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
               transform="translate(-20,-20)"
-              stroke-width="3"
-              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
+              stroke-width="3"
+              stroke="rgba(0,0,0,1)"
               stroke-opacity="0.85"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-45.480000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 91.96000000000001,0 l 0,23 l-91.96000000000001 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="91.96000000000001"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -535,31 +448,18 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <image
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               preserveAspectRatio="none"
               x="0"
               y="0"
               href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
               transform="translate(-20,-20)"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
               opacity="0.25"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-42.840000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 86.67999999999999,0 l 0,23 l-86.67999999999999 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="86.67999999999999"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -591,25 +491,12 @@
               y="0"
               href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
               transform="translate(-20,-20)"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
               opacity="0.2"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-44.820000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 90.64,0 l 0,23 l-90.64 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="90.64"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -620,6 +507,7 @@
                 dy="11.5px"
                 font-size="12"
                 text-anchor="middle"
+                opacity="0.25"
               >
                 image-disabled
               </text>

packages/g6/__tests__/integration/snapshots/static/node-rect.svg

@@ -20,27 +20,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               d="M 4,0 l 32,0 a 4,4,0,0,1,4,4 l 0,32 a 4,4,0,0,1,-4,4 l -32,0 a 4,4,0,0,1,-4,-4 l 0,-32 a 4,4,0,0,1,4,-4 z"
               transform="translate(-20,-20)"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-11.520000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 24.04,0 l 0,23 l-24.04 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="24.04"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -86,11 +73,11 @@
               fill="none"
               d="M 4,0 l 32,0 a 4,4,0,0,1,4,4 l 0,32 a 4,4,0,0,1,-4,4 l -32,0 a 4,4,0,0,1,-4,-4 l 0,-32 a 4,4,0,0,1,4,-4 z"
               transform="translate(-20,-20)"
-              stroke-width="12"
-              stroke="rgba(34,126,255,1)"
               width="40"
               height="40"
+              stroke="rgba(23,131,255,1)"
               stroke-dasharray="0,0"
+              stroke-width="12"
               stroke-opacity="0.25"
               pointer-events="none"
             />
@@ -98,27 +85,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               d="M 4,0 l 32,0 a 4,4,0,0,1,4,4 l 0,32 a 4,4,0,0,1,-4,4 l -32,0 a 4,4,0,0,1,-4,-4 l 0,-32 a 4,4,0,0,1,4,-4 z"
               transform="translate(-20,-20)"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-26.520000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 54.04,0 l 0,23 l-54.04 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="54.04"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -165,27 +139,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               d="M 4,0 l 32,0 a 4,4,0,0,1,4,4 l 0,32 a 4,4,0,0,1,-4,4 l -32,0 a 4,4,0,0,1,-4,-4 l 0,-32 a 4,4,0,0,1,4,-4 z"
               transform="translate(-20,-20)"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-35.759998,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 72.52,0 l 0,23 l-72.52 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="72.52"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -256,7 +217,7 @@
               <g transform="matrix(1,0,0,1,-4,-9.500000)">
                 <path
                   id="background"
-                  fill="rgba(248,98,84,1)"
+                  fill="rgba(245,34,45,1)"
                   d="M 9.5,0 l 27.520000000000003,0 a 9.5,9.5,0,0,1,9.5,9.5 l 0,0 a 9.5,9.5,0,0,1,-9.5,9.5 l -27.520000000000003,0 a 9.5,9.5,0,0,1,-9.5,-9.5 l 0,0 a 9.5,9.5,0,0,1,9.5,-9.5 z"
                   stroke-width="0"
                   width="46.52"
@@ -283,7 +244,7 @@
               <g transform="matrix(1,0,0,1,-4,-18)">
                 <path
                   id="background"
-                  fill="rgba(237,183,75,1)"
+                  fill="rgba(250,173,20,1)"
                   d="M 9.5,0 l 15.120000000000005,0 a 9.5,9.5,0,0,1,9.5,9.5 l 0,0 a 9.5,9.5,0,0,1,-9.5,9.5 l -15.120000000000005,0 a 9.5,9.5,0,0,1,-9.5,-9.5 l 0,0 a 9.5,9.5,0,0,1,9.5,-9.5 z"
                   stroke-width="0"
                   width="34.120000000000005"
@@ -315,27 +276,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               d="M 4,0 l 32,0 a 4,4,0,0,1,4,4 l 0,32 a 4,4,0,0,1,-4,4 l -32,0 a 4,4,0,0,1,-4,-4 l 0,-32 a 4,4,0,0,1,4,-4 z"
               transform="translate(-20,-20)"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-29.580000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 60.16,0 l 0,23 l-60.16 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="60.16"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -376,7 +324,7 @@
           <g transform="matrix(1,0,0,1,-20,0)">
             <circle
               id="port-0"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -389,7 +337,7 @@
           <g transform="matrix(1,0,0,1,20,0)">
             <circle
               id="port-1"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -402,7 +350,7 @@
           <g transform="matrix(1,0,0,1,0,-20)">
             <circle
               id="port-2"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -415,7 +363,7 @@
           <g transform="matrix(1,0,0,1,0,20)">
             <circle
               id="port-3"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -433,11 +381,11 @@
               fill="none"
               d="M 4,0 l 32,0 a 4,4,0,0,1,4,4 l 0,32 a 4,4,0,0,1,-4,4 l -32,0 a 4,4,0,0,1,-4,-4 l 0,-32 a 4,4,0,0,1,4,-4 z"
               transform="translate(-20,-20)"
-              stroke-width="12"
-              stroke="rgba(34,126,255,1)"
               width="40"
               height="40"
+              stroke="rgba(23,131,255,1)"
               stroke-dasharray="0,0"
+              stroke-width="12"
               stroke-opacity="0.25"
               pointer-events="none"
             />
@@ -445,27 +393,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               d="M 4,0 l 32,0 a 4,4,0,0,1,4,4 l 0,32 a 4,4,0,0,1,-4,4 l -32,0 a 4,4,0,0,1,-4,-4 l 0,-32 a 4,4,0,0,1,4,-4 z"
               transform="translate(-20,-20)"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-31.799999,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 64.6,0 l 0,23 l-64.6 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="64.6"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -516,7 +451,7 @@
               d="M 4,0 l 32,0 a 4,4,0,0,1,4,4 l 0,32 a 4,4,0,0,1,-4,4 l -32,0 a 4,4,0,0,1,-4,-4 l 0,-32 a 4,4,0,0,1,4,-4 z"
               transform="translate(-20,-20)"
               stroke-width="12"
-              stroke="rgba(34,126,255,1)"
+              stroke="rgba(23,131,255,1)"
               width="40"
               height="40"
               stroke-dasharray="0,0"
@@ -527,27 +462,16 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               d="M 4,0 l 32,0 a 4,4,0,0,1,4,4 l 0,32 a 4,4,0,0,1,-4,4 l -32,0 a 4,4,0,0,1,-4,-4 l 0,-32 a 4,4,0,0,1,4,-4 z"
               transform="translate(-20,-20)"
-              stroke-width="3"
-              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
+              stroke-width="3"
+              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-45.639999,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 92.28,0 l 0,27 l-92.28 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="92.28"
-                height="27"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -595,28 +519,17 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               d="M 4,0 l 32,0 a 4,4,0,0,1,4,4 l 0,32 a 4,4,0,0,1,-4,4 l -32,0 a 4,4,0,0,1,-4,-4 l 0,-32 a 4,4,0,0,1,4,-4 z"
               transform="translate(-20,-20)"
-              stroke-width="3"
-              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
+              stroke-width="3"
+              stroke="rgba(0,0,0,1)"
               stroke-opacity="0.85"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-39.599998,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 80.2,0 l 0,23 l-80.2 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="80.2"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -664,28 +577,15 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               d="M 4,0 l 32,0 a 4,4,0,0,1,4,4 l 0,32 a 4,4,0,0,1,-4,4 l -32,0 a 4,4,0,0,1,-4,-4 l 0,-32 a 4,4,0,0,1,4,-4 z"
               transform="translate(-20,-20)"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
               opacity="0.25"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-36.959999,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 74.91999999999999,0 l 0,23 l-74.91999999999999 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="74.91999999999999"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -737,24 +637,11 @@
               fill="rgba(240,240,240,1)"
               d="M 4,0 l 32,0 a 4,4,0,0,1,4,4 l 0,32 a 4,4,0,0,1,-4,4 l -32,0 a 4,4,0,0,1,-4,-4 l 0,-32 a 4,4,0,0,1,4,-4 z"
               transform="translate(-20,-20)"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-38.939999,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 78.88,0 l 0,23 l-78.88 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="78.88"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -765,6 +652,7 @@
                 dy="11.5px"
                 font-size="12"
                 text-anchor="middle"
+                opacity="0.25"
               >
                 rect-disabled
               </text>

packages/g6/__tests__/integration/snapshots/static/node-star.svg

@@ -20,10 +20,8 @@
           <g transform="matrix(1,0,0,1,-19.021130,-20)">
             <polygon
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               points="19.02113032590307,0 23.429519718096618,13.932372542187894 38.04226065180614,13.819660112501051 26.15405419811672,22.317627457812105 30.776835371752533,36.180339887498945 19.02113032590307,27.5 7.265425280053606,36.180339887498945 11.888206453689417,22.317627457812105 0,13.819660112501051 14.61274093370952,13.932372542187894"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g
@@ -31,17 +29,6 @@
             fill="none"
             transform="matrix(1,0,0,1,0.000001,16.180340)"
           >
-            <g transform="matrix(1,0,0,1,-11.220000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 23.439999999999998,0 l 0,23 l-23.439999999999998 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="23.439999999999998"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -86,9 +73,9 @@
               id="halo"
               fill="none"
               points="19.02113032590307,0 23.429519718096618,13.932372542187894 38.04226065180614,13.819660112501051 26.15405419811672,22.317627457812105 30.776835371752533,36.180339887498945 19.02113032590307,27.5 7.265425280053606,36.180339887498945 11.888206453689417,22.317627457812105 0,13.819660112501051 14.61274093370952,13.932372542187894"
-              stroke-width="12"
-              stroke="rgba(34,126,255,1)"
+              stroke="rgba(23,131,255,1)"
               stroke-dasharray="0,0"
+              stroke-width="12"
               stroke-opacity="0.25"
               pointer-events="none"
             />
@@ -96,10 +83,8 @@
           <g transform="matrix(1,0,0,1,-19.021130,-20)">
             <polygon
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               points="19.02113032590307,0 23.429519718096618,13.932372542187894 38.04226065180614,13.819660112501051 26.15405419811672,22.317627457812105 30.776835371752533,36.180339887498945 19.02113032590307,27.5 7.265425280053606,36.180339887498945 11.888206453689417,22.317627457812105 0,13.819660112501051 14.61274093370952,13.932372542187894"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g
@@ -107,17 +92,6 @@
             fill="none"
             transform="matrix(1,0,0,1,0.000001,16.180340)"
           >
-            <g transform="matrix(1,0,0,1,-26.219999,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 53.44,0 l 0,23 l-53.44 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="53.44"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -164,10 +138,8 @@
           <g transform="matrix(1,0,0,1,-19.021130,-20)">
             <polygon
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               points="19.02113032590307,0 23.429519718096618,13.932372542187894 38.04226065180614,13.819660112501051 26.15405419811672,22.317627457812105 30.776835371752533,36.180339887498945 19.02113032590307,27.5 7.265425280053606,36.180339887498945 11.888206453689417,22.317627457812105 0,13.819660112501051 14.61274093370952,13.932372542187894"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g
@@ -175,17 +147,6 @@
             fill="none"
             transform="matrix(1,0,0,1,0.000001,16.180340)"
           >
-            <g transform="matrix(1,0,0,1,-35.459999,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 71.92,0 l 0,23 l-71.92 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="71.92"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -260,7 +221,7 @@
               <g transform="matrix(1,0,0,1,-4,-9.500000)">
                 <path
                   id="background"
-                  fill="rgba(248,98,84,1)"
+                  fill="rgba(245,34,45,1)"
                   d="M 9.5,0 l 27.520000000000003,0 a 9.5,9.5,0,0,1,9.5,9.5 l 0,0 a 9.5,9.5,0,0,1,-9.5,9.5 l -27.520000000000003,0 a 9.5,9.5,0,0,1,-9.5,-9.5 l 0,0 a 9.5,9.5,0,0,1,9.5,-9.5 z"
                   stroke-width="0"
                   width="46.52"
@@ -291,7 +252,7 @@
               <g transform="matrix(1,0,0,1,-4,-18)">
                 <path
                   id="background"
-                  fill="rgba(237,183,75,1)"
+                  fill="rgba(250,173,20,1)"
                   d="M 9.5,0 l 15.120000000000005,0 a 9.5,9.5,0,0,1,9.5,9.5 l 0,0 a 9.5,9.5,0,0,1,-9.5,9.5 l -15.120000000000005,0 a 9.5,9.5,0,0,1,-9.5,-9.5 l 0,0 a 9.5,9.5,0,0,1,9.5,-9.5 z"
                   stroke-width="0"
                   width="34.120000000000005"
@@ -323,10 +284,8 @@
           <g transform="matrix(1,0,0,1,-19.021130,-20)">
             <polygon
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               points="19.02113032590307,0 23.429519718096618,13.932372542187894 38.04226065180614,13.819660112501051 26.15405419811672,22.317627457812105 30.776835371752533,36.180339887498945 19.02113032590307,27.5 7.265425280053606,36.180339887498945 11.888206453689417,22.317627457812105 0,13.819660112501051 14.61274093370952,13.932372542187894"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g
@@ -334,17 +293,6 @@
             fill="none"
             transform="matrix(1,0,0,1,0.000001,16.180340)"
           >
-            <g transform="matrix(1,0,0,1,-29.280001,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 59.56,0 l 0,23 l-59.56 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="59.56"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -385,7 +333,7 @@
           <g transform="matrix(1,0,0,1,-19.021130,-6.180340)">
             <circle
               id="port-0"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -398,7 +346,7 @@
           <g transform="matrix(1,0,0,1,19.021130,-6.180340)">
             <circle
               id="port-1"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -411,7 +359,7 @@
           <g transform="matrix(1,0,0,1,0,-20)">
             <circle
               id="port-2"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -424,7 +372,7 @@
           <g transform="matrix(1,0,0,1,0,7.500000)">
             <circle
               id="port-3"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -441,9 +389,9 @@
               id="halo"
               fill="none"
               points="19.02113032590307,0 23.429519718096618,13.932372542187894 38.04226065180614,13.819660112501051 26.15405419811672,22.317627457812105 30.776835371752533,36.180339887498945 19.02113032590307,27.5 7.265425280053606,36.180339887498945 11.888206453689417,22.317627457812105 0,13.819660112501051 14.61274093370952,13.932372542187894"
-              stroke-width="12"
-              stroke="rgba(34,126,255,1)"
+              stroke="rgba(23,131,255,1)"
               stroke-dasharray="0,0"
+              stroke-width="12"
               stroke-opacity="0.25"
               pointer-events="none"
             />
@@ -451,10 +399,8 @@
           <g transform="matrix(1,0,0,1,-19.021130,-20)">
             <polygon
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               points="19.02113032590307,0 23.429519718096618,13.932372542187894 38.04226065180614,13.819660112501051 26.15405419811672,22.317627457812105 30.776835371752533,36.180339887498945 19.02113032590307,27.5 7.265425280053606,36.180339887498945 11.888206453689417,22.317627457812105 0,13.819660112501051 14.61274093370952,13.932372542187894"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g
@@ -462,17 +408,6 @@
             fill="none"
             transform="matrix(1,0,0,1,0.000001,16.180340)"
           >
-            <g transform="matrix(1,0,0,1,-31.500000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 63.99999999999999,0 l 0,23 l-63.99999999999999 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="63.99999999999999"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -522,7 +457,7 @@
               fill="none"
               points="19.02113032590307,0 23.429519718096618,13.932372542187894 38.04226065180614,13.819660112501051 26.15405419811672,22.317627457812105 30.776835371752533,36.180339887498945 19.02113032590307,27.5 7.265425280053606,36.180339887498945 11.888206453689417,22.317627457812105 0,13.819660112501051 14.61274093370952,13.932372542187894"
               stroke-width="12"
-              stroke="rgba(34,126,255,1)"
+              stroke="rgba(23,131,255,1)"
               stroke-dasharray="0,0"
               stroke-opacity="0.25"
               pointer-events="none"
@@ -531,7 +466,7 @@
           <g transform="matrix(1,0,0,1,-19.021130,-20)">
             <polygon
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               points="19.02113032590307,0 23.429519718096618,13.932372542187894 38.04226065180614,13.819660112501051 26.15405419811672,22.317627457812105 30.776835371752533,36.180339887498945 19.02113032590307,27.5 7.265425280053606,36.180339887498945 11.888206453689417,22.317627457812105 0,13.819660112501051 14.61274093370952,13.932372542187894"
               stroke-width="3"
               stroke="rgba(0,0,0,1)"
@@ -542,17 +477,6 @@
             fill="none"
             transform="matrix(1,0,0,1,0.000001,16.180340)"
           >
-            <g transform="matrix(1,0,0,1,-45.290001,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 91.57999999999998,0 l 0,27 l-91.57999999999998 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="91.57999999999998"
-                height="27"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -600,7 +524,7 @@
           <g transform="matrix(1,0,0,1,-19.021130,-20)">
             <polygon
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               points="19.02113032590307,0 23.429519718096618,13.932372542187894 38.04226065180614,13.819660112501051 26.15405419811672,22.317627457812105 30.776835371752533,36.180339887498945 19.02113032590307,27.5 7.265425280053606,36.180339887498945 11.888206453689417,22.317627457812105 0,13.819660112501051 14.61274093370952,13.932372542187894"
               stroke-width="3"
               stroke="rgba(0,0,0,1)"
@@ -612,17 +536,6 @@
             fill="none"
             transform="matrix(1,0,0,1,0.000001,16.180340)"
           >
-            <g transform="matrix(1,0,0,1,-39.299999,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 79.6,0 l 0,23 l-79.6 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="79.6"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -670,10 +583,8 @@
           <g transform="matrix(1,0,0,1,-19.021130,-20)">
             <polygon
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               points="19.02113032590307,0 23.429519718096618,13.932372542187894 38.04226065180614,13.819660112501051 26.15405419811672,22.317627457812105 30.776835371752533,36.180339887498945 19.02113032590307,27.5 7.265425280053606,36.180339887498945 11.888206453689417,22.317627457812105 0,13.819660112501051 14.61274093370952,13.932372542187894"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               opacity="0.25"
             />
           </g>
@@ -682,17 +593,6 @@
             fill="none"
             transform="matrix(1,0,0,1,0.000001,16.180340)"
           >
-            <g transform="matrix(1,0,0,1,-36.660000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 74.32,0 l 0,23 l-74.32 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="74.32"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -743,8 +643,6 @@
               id="key"
               fill="rgba(240,240,240,1)"
               points="19.02113032590307,0 23.429519718096618,13.932372542187894 38.04226065180614,13.819660112501051 26.15405419811672,22.317627457812105 30.776835371752533,36.180339887498945 19.02113032590307,27.5 7.265425280053606,36.180339887498945 11.888206453689417,22.317627457812105 0,13.819660112501051 14.61274093370952,13.932372542187894"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g
@@ -752,17 +650,6 @@
             fill="none"
             transform="matrix(1,0,0,1,0.000001,16.180340)"
           >
-            <g transform="matrix(1,0,0,1,-38.639999,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 78.28,0 l 0,23 l-78.28 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="78.28"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -773,6 +660,7 @@
                 dy="11.5px"
                 font-size="12"
                 text-anchor="middle"
+                opacity="0.25"
               >
                 star-disabled
               </text>

packages/g6/__tests__/integration/snapshots/static/node-triangle.svg

@@ -20,24 +20,11 @@
           <g transform="matrix(1,0,0,1,-20,-20)">
             <polygon
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               points="0,40 40,40 20,0"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-21.900000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 44.8,0 l 0,23 l-44.8 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="44.8"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -86,9 +73,9 @@
               id="halo"
               fill="none"
               points="0,40 40,40 20,0"
-              stroke-width="12"
-              stroke="rgba(34,126,255,1)"
+              stroke="rgba(23,131,255,1)"
               stroke-dasharray="0,0"
+              stroke-width="12"
               stroke-opacity="0.25"
               pointer-events="none"
             />
@@ -96,24 +83,11 @@
           <g transform="matrix(1,0,0,1,-20,-20)">
             <polygon
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               points="0,40 40,40 20,0"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-36.900002,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 74.8,0 l 0,23 l-74.8 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="74.8"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -160,24 +134,11 @@
           <g transform="matrix(1,0,0,1,-20,-20)">
             <polygon
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               points="0,40 40,40 20,0"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-46.139999,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 93.27999999999999,0 l 0,23 l-93.27999999999999 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="93.27999999999999"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -248,7 +209,7 @@
               <g transform="matrix(1,0,0,1,-4,-9.500000)">
                 <path
                   id="background"
-                  fill="rgba(248,98,84,1)"
+                  fill="rgba(245,34,45,1)"
                   d="M 9.5,0 l 27.520000000000003,0 a 9.5,9.5,0,0,1,9.5,9.5 l 0,0 a 9.5,9.5,0,0,1,-9.5,9.5 l -27.520000000000003,0 a 9.5,9.5,0,0,1,-9.5,-9.5 l 0,0 a 9.5,9.5,0,0,1,9.5,-9.5 z"
                   stroke-width="0"
                   width="46.52"
@@ -275,7 +236,7 @@
               <g transform="matrix(1,0,0,1,-4,-18)">
                 <path
                   id="background"
-                  fill="rgba(237,183,75,1)"
+                  fill="rgba(250,173,20,1)"
                   d="M 9.5,0 l 15.120000000000005,0 a 9.5,9.5,0,0,1,9.5,9.5 l 0,0 a 9.5,9.5,0,0,1,-9.5,9.5 l -15.120000000000005,0 a 9.5,9.5,0,0,1,-9.5,-9.5 l 0,0 a 9.5,9.5,0,0,1,9.5,-9.5 z"
                   stroke-width="0"
                   width="34.120000000000005"
@@ -307,24 +268,11 @@
           <g transform="matrix(1,0,0,1,-20,-20)">
             <polygon
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               points="0,20 40,40 40,0"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-39.959999,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 80.92,0 l 0,23 l-80.92 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="80.92"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -365,7 +313,7 @@
           <g transform="matrix(1,0,0,1,-20,0)">
             <circle
               id="port-0"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -378,7 +326,7 @@
           <g transform="matrix(1,0,0,1,20,-20)">
             <circle
               id="port-1"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -391,7 +339,7 @@
           <g transform="matrix(1,0,0,1,20,20)">
             <circle
               id="port-2"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-3,-3)"
               cx="3"
               cy="3"
@@ -408,9 +356,9 @@
               id="halo"
               fill="none"
               points="0,40 40,40 20,0"
-              stroke-width="12"
-              stroke="rgba(34,126,255,1)"
+              stroke="rgba(23,131,255,1)"
               stroke-dasharray="0,0"
+              stroke-width="12"
               stroke-opacity="0.25"
               pointer-events="none"
             />
@@ -418,24 +366,11 @@
           <g transform="matrix(1,0,0,1,-20,-20)">
             <polygon
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               points="0,40 40,40 20,0"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-42.180000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 85.35999999999999,0 l 0,23 l-85.35999999999999 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="85.35999999999999"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -485,7 +420,7 @@
               fill="none"
               points="0,40 40,40 20,0"
               stroke-width="12"
-              stroke="rgba(34,126,255,1)"
+              stroke="rgba(23,131,255,1)"
               stroke-dasharray="0,0"
               stroke-opacity="0.25"
               pointer-events="none"
@@ -494,24 +429,13 @@
           <g transform="matrix(1,0,0,1,-20,-20)">
             <polygon
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               points="0,40 40,40 20,0"
               stroke-width="3"
               stroke="rgba(0,0,0,1)"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-57.750000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 116.5,0 l 0,27 l-116.5 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="116.5"
-                height="27"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -559,7 +483,7 @@
           <g transform="matrix(1,0,0,1,-20,-20)">
             <polygon
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               points="0,40 40,40 20,0"
               stroke-width="3"
               stroke="rgba(0,0,0,1)"
@@ -567,17 +491,6 @@
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-49.980000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 100.96000000000001,0 l 0,23 l-100.96000000000001 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="100.96000000000001"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
@@ -625,25 +538,12 @@
           <g transform="matrix(1,0,0,1,-20,-20)">
             <polygon
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               points="0,40 40,40 20,0"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               opacity="0.25"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-47.340000,0)">
-              <path
-                id="background"
-                fill="rgba(255,255,255,1)"
-                d="M 0,0 l 95.67999999999999,0 l 0,23 l-95.67999999999999 0 z"
-                opacity="0.5"
-                stroke-width="0"
-                width="95.67999999999999"
-                height="23"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"

packages/g6/__tests__/snapshots/behaviors/behavior-drag-canvas/default.svg

@@ -1937,12 +1937,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1951,12 +1949,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1965,12 +1961,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1979,12 +1973,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1993,12 +1985,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2007,12 +1997,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2021,12 +2009,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2035,12 +2021,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2049,12 +2033,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2063,12 +2045,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2081,12 +2061,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2099,12 +2077,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2117,12 +2093,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2135,12 +2109,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2153,12 +2125,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2171,12 +2141,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2189,12 +2157,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2207,12 +2173,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2225,12 +2189,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2243,12 +2205,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2261,12 +2221,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2279,12 +2237,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2297,12 +2253,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2315,12 +2269,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2333,12 +2285,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2351,12 +2301,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2369,12 +2317,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2387,12 +2333,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2405,12 +2349,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2423,12 +2365,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2441,12 +2381,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2459,12 +2397,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2477,12 +2413,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -2495,12 +2429,10 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(34,126,255,1)"
+              fill="rgba(23,131,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke-width="0"
-              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>