diff --git a/packages/g6/__tests__/demo/animation/controller-element.ts b/packages/g6/__tests__/demo/animation/controller-element.ts
index 05f8f4be850..38358efe40f 100644
--- a/packages/g6/__tests__/demo/animation/controller-element.ts
+++ b/packages/g6/__tests__/demo/animation/controller-element.ts
@@ -36,9 +36,9 @@ export const controllerElement: AnimationTestCase = async (context) => {
   await graph.draw();
 
   graph.addNodeData([
-    { id: 'node-4', style: { x: 50, y: 200, stroke: 'orange' } },
-    { id: 'node-5', style: { x: 75, y: 150, stroke: 'purple' } },
-    { id: 'node-6', style: { x: 200, y: 100, stroke: 'cyan' } },
+    { 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' } },
   ]);
 
   graph.removeNodeData(['node-1']);
diff --git a/packages/g6/__tests__/demo/static/edge-line.ts b/packages/g6/__tests__/demo/static/edge-line.ts
index 148deebb754..2e57bc62675 100644
--- a/packages/g6/__tests__/demo/static/edge-line.ts
+++ b/packages/g6/__tests__/demo/static/edge-line.ts
@@ -2,78 +2,34 @@ import { Graph } from '@/src';
 import type { StaticTestCase } from '../types';
 
 export const edgeLine: StaticTestCase = async (context) => {
-  const { canvas, animation } = context;
+  const { canvas, animation, theme } = context;
+
+  const edgeIds = ['line-default', 'line-active', 'line-selected', 'line-highlight', 'line-inactive', 'line-disabled'];
 
   const data = {
-    nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }, { id: 'node6' }],
-    edges: [
-      {
-        id: 'line-default',
-        source: 'node1',
-        target: 'node2',
-      },
-      {
-        id: 'line-active',
-        source: 'node1',
-        target: 'node3',
-      },
-      {
-        id: 'line-selected',
-        source: 'node1',
-        target: 'node4',
-      },
-      {
-        id: 'line-highlight',
-        source: 'node1',
-        target: 'node5',
-      },
-      {
-        id: 'line-inactive',
-        source: 'node1',
-        target: 'node6',
-      },
-    ],
+    nodes: new Array(7).fill(0).map((_, i) => ({ id: `node${i + 1}` })),
+    edges: edgeIds.map((id, i) => ({
+      id,
+      source: 'node1',
+      target: `node${i + 2}`,
+    })),
   };
 
   const graph = new Graph({
     container: canvas,
+    theme,
     data,
     node: {
       style: {
         type: 'circle', // 👈🏻 Node shape type.
-        size: 40,
-        color: '#1783FF',
       },
     },
     edge: {
       style: {
         type: 'line', // 👈🏻 Edge shape type.
-        color: 'rgb(153, 173, 209)',
         labelText: (d: any) => d.id,
-        labelBackgroundPadding: 0,
-        labelBackgroundFill: '#fff',
-        labelBackgroundLineWidth: 0,
-        labelBackgroundOpacity: 0.75,
         endArrow: true,
       },
-      state: {
-        active: {
-          halo: true,
-        },
-        selected: {
-          lineWidth: 2,
-          labelFontWeight: 700,
-          halo: true,
-        },
-        highlight: {
-          halo: false,
-          lineWidth: 2,
-          labelFontWeight: 700,
-        },
-        inactive: {
-          color: 'rgb(210, 218, 233)',
-        },
-      },
     },
     layout: {
       type: 'radial',
@@ -89,4 +45,5 @@ export const edgeLine: StaticTestCase = async (context) => {
   graph.setElementState('line-selected', 'selected');
   graph.setElementState('line-highlight', 'highlight');
   graph.setElementState('line-inactive', 'inactive');
+  graph.setElementState('line-disabled', 'disabled');
 };
diff --git a/packages/g6/__tests__/demo/static/node-circle.ts b/packages/g6/__tests__/demo/static/node-circle.ts
index 92220106460..270cc06955f 100644
--- a/packages/g6/__tests__/demo/static/node-circle.ts
+++ b/packages/g6/__tests__/demo/static/node-circle.ts
@@ -2,7 +2,7 @@ import { Graph } from '@/src';
 import type { StaticTestCase } from '../types';
 
 export const nodeCircle: StaticTestCase = async (context) => {
-  const { canvas } = context;
+  const { canvas, animation, theme } = context;
 
   const data = {
     nodes: [
@@ -14,65 +14,44 @@ export const nodeCircle: StaticTestCase = async (context) => {
       { id: 'circle-selected' },
       { id: 'circle-highlight' },
       { id: 'circle-inactive' },
+      { id: 'circle-disabled' },
     ],
   };
 
   const graph = new Graph({
     container: canvas,
     data,
+    theme,
     node: {
       style: {
         type: 'circle', // 👈🏻 Node shape type.
         size: 40,
-        fill: '#1783FF',
+        labelMaxWidth: 120,
         labelText: (d: any) => d.id,
+        iconHeight: 20,
+        iconWidth: 20,
         iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-        iconWidth: 30,
-        iconHeight: 30,
         halo: (d: any) => d.id.includes('halo'),
         ports: (d: any) =>
           d.id.includes('ports')
             ? [{ position: 'left' }, { position: 'right' }, { position: 'top' }, { position: 'bottom' }]
             : [],
-        portStroke: '#31d0c6',
-        portFill: '#fff',
-        portR: 2,
-        portLineWidth: 1,
         badges: (d: any) =>
           d.id.includes('badges')
             ? [
-                { text: 'A', position: 'right-top', backgroundFill: '#8291b2' },
-                { text: 'Important', position: 'right', backgroundFill: '#e66c5b' },
-                { text: 'Notice', position: 'right-bottom', backgroundFill: '#e5b95e' },
+                { text: 'A', position: 'right-top' },
+                { text: 'Important', position: 'right' },
+                { text: 'Notice', position: 'right-bottom' },
               ]
             : [],
-        badgeFill: '#fff',
         badgeFontSize: 8,
         badgePadding: [1, 4],
       },
-      state: {
-        active: {
-          halo: true,
-        },
-        selected: {
-          halo: true,
-          lineWidth: 2,
-          stroke: '#000',
-        },
-        highlight: {
-          halo: false,
-          lineWidth: 2,
-          stroke: '#000',
-        },
-        inactive: {
-          opacity: 0.2,
-        },
-      },
     },
     layout: {
       type: 'grid',
     },
-    animation: false,
+    animation,
   });
 
   await graph.render();
@@ -81,4 +60,5 @@ export const nodeCircle: StaticTestCase = async (context) => {
   graph.setElementState('circle-selected', 'selected');
   graph.setElementState('circle-highlight', 'highlight');
   graph.setElementState('circle-inactive', 'inactive');
+  graph.setElementState('circle-disabled', 'disabled');
 };
diff --git a/packages/g6/__tests__/demo/static/node-ellipse.ts b/packages/g6/__tests__/demo/static/node-ellipse.ts
index 64394393104..34d8d55255e 100644
--- a/packages/g6/__tests__/demo/static/node-ellipse.ts
+++ b/packages/g6/__tests__/demo/static/node-ellipse.ts
@@ -2,7 +2,7 @@ import { Graph } from '@/src';
 import type { StaticTestCase } from '../types';
 
 export const nodeEllipse: StaticTestCase = async (context) => {
-  const { canvas } = context;
+  const { canvas, animation, theme } = context;
 
   const data = {
     nodes: [
@@ -14,63 +14,44 @@ export const nodeEllipse: StaticTestCase = async (context) => {
       { id: 'ellipse-selected' },
       { id: 'ellipse-highlight' },
       { id: 'ellipse-inactive' },
+      { id: 'ellipse-disabled' },
     ],
   };
 
   const graph = new Graph({
     container: canvas,
+    theme,
     data,
     node: {
       style: {
         type: 'ellipse', // 👈🏻 Node shape type.
         size: [45, 35],
-        fill: '#1783FF',
+        labelMaxWidth: 120,
         labelText: (d: any) => d.id,
+        iconHeight: 20,
+        iconWidth: 20,
         iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
         halo: (d: any) => d.id.includes('halo'),
         ports: (d: any) =>
           d.id.includes('ports')
             ? [{ position: 'left' }, { position: 'right' }, { position: 'top' }, { position: 'bottom' }]
             : [],
-        portStroke: '#31d0c6',
-        portFill: '#fff',
-        portR: 2,
-        portLineWidth: 1,
         badges: (d: any) =>
           d.id.includes('badges')
             ? [
-                { text: 'A', position: 'right-top', backgroundFill: '#8291b2' },
-                { text: 'Important', position: 'right', backgroundFill: '#e66c5b' },
-                { text: 'Notice', position: 'right-bottom', backgroundFill: '#e5b95e' },
+                { text: 'A', position: 'right-top' },
+                { text: 'Important', position: 'right' },
+                { text: 'Notice', position: 'right-bottom' },
               ]
             : [],
-        badgeFill: '#fff',
         badgeFontSize: 8,
         badgePadding: [1, 4],
       },
-      state: {
-        active: {
-          halo: true,
-        },
-        selected: {
-          halo: true,
-          lineWidth: 2,
-          stroke: '#000',
-        },
-        highlight: {
-          halo: false,
-          lineWidth: 2,
-          stroke: '#000',
-        },
-        inactive: {
-          opacity: 0.2,
-        },
-      },
     },
     layout: {
       type: 'grid',
     },
-    animation: false,
+    animation,
   });
 
   await graph.render();
@@ -79,4 +60,5 @@ export const nodeEllipse: StaticTestCase = async (context) => {
   graph.setElementState('ellipse-selected', 'selected');
   graph.setElementState('ellipse-highlight', 'highlight');
   graph.setElementState('ellipse-inactive', 'inactive');
+  graph.setElementState('ellipse-disabled', 'disabled');
 };
diff --git a/packages/g6/__tests__/demo/static/node-image.ts b/packages/g6/__tests__/demo/static/node-image.ts
index c60629425f8..06d613fc4a4 100644
--- a/packages/g6/__tests__/demo/static/node-image.ts
+++ b/packages/g6/__tests__/demo/static/node-image.ts
@@ -2,7 +2,7 @@ import { Graph } from '@/src';
 import type { StaticTestCase } from '../types';
 
 export const nodeImage: StaticTestCase = async (context) => {
-  const { canvas } = context;
+  const { canvas, animation, theme } = context;
 
   const data = {
     nodes: [
@@ -14,54 +14,40 @@ export const nodeImage: StaticTestCase = async (context) => {
       { id: 'image-selected' },
       { id: 'image-highlight' },
       { id: 'image-inactive' },
+      { id: 'image-disabled' },
     ],
   };
 
   const graph = new Graph({
     container: canvas,
+    theme,
     data,
     node: {
       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'),
-        haloStroke: '#1783FF',
+        haloStroke: '#227eff',
         ports: (d: any) =>
           d.id.includes('ports')
             ? [{ position: 'left' }, { position: 'right' }, { position: 'top' }, { position: 'bottom' }]
             : [],
-        portStroke: '#31d0c6',
-        portFill: '#fff',
-        portR: 2,
-        portLineWidth: 1,
         badges: (d: any) =>
           d.id.includes('badges')
             ? [
-                { text: 'A', position: 'right-top', backgroundFill: '#8291b2' },
-                { text: 'Important', position: 'right', backgroundFill: '#e66c5b' },
-                { text: 'Notice', position: 'right-bottom', backgroundFill: '#e5b95e' },
+                { text: 'A', position: 'right-top' },
+                { text: 'Important', position: 'right' },
+                { text: 'Notice', position: 'right-bottom' },
               ]
             : [],
-        badgeFill: '#fff',
         badgeFontSize: 8,
         badgePadding: [1, 4],
       },
       state: {
-        active: {
-          halo: true,
-        },
-        selected: {
-          halo: true,
-          labelFontWeight: 700,
-          labelFontSize: 14,
-        },
-        highlight: {
-          halo: false,
-          labelFontWeight: 700,
-        },
-        inactive: {
+        disabled: {
           opacity: 0.2,
         },
       },
@@ -69,7 +55,7 @@ export const nodeImage: StaticTestCase = async (context) => {
     layout: {
       type: 'grid',
     },
-    animation: false,
+    animation,
   });
 
   await graph.render();
@@ -77,4 +63,5 @@ export const nodeImage: StaticTestCase = async (context) => {
   graph.setElementState('image-selected', 'selected');
   graph.setElementState('image-highlight', 'highlight');
   graph.setElementState('image-inactive', 'inactive');
+  graph.setElementState('image-disabled', 'disabled');
 };
diff --git a/packages/g6/__tests__/demo/static/node-rect.ts b/packages/g6/__tests__/demo/static/node-rect.ts
index add1df855a8..9e5c16082ec 100644
--- a/packages/g6/__tests__/demo/static/node-rect.ts
+++ b/packages/g6/__tests__/demo/static/node-rect.ts
@@ -2,7 +2,7 @@ import { Graph } from '@/src';
 import type { StaticTestCase } from '../types';
 
 export const nodeRect: StaticTestCase = async (context) => {
-  const { canvas } = context;
+  const { canvas, animation, theme } = context;
 
   const data = {
     nodes: [
@@ -14,66 +14,45 @@ export const nodeRect: StaticTestCase = async (context) => {
       { id: 'rect-selected' },
       { id: 'rect-highlight' },
       { id: 'rect-inactive' },
+      { id: 'rect-disabled' },
     ],
   };
 
   const graph = new Graph({
     container: canvas,
+    theme,
     data,
     node: {
       style: {
         type: 'rect', // 👈🏻 Node shape type.
         radius: 4, // 👈🏻 Set the radius.
         size: 40,
-        fill: '#1783FF',
+        labelMaxWidth: 120,
         labelText: (d: any) => d.id,
+        iconWidth: 20,
+        iconHeight: 20,
         iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-        iconWidth: 30,
-        iconHeight: 30,
         halo: (d: any) => d.id.includes('halo'),
         ports: (d: any) =>
           d.id.includes('ports')
             ? [{ position: 'left' }, { position: 'right' }, { position: 'top' }, { position: 'bottom' }]
             : [],
-        portStroke: '#31d0c6',
-        portFill: '#fff',
-        portR: 2,
-        portLineWidth: 1,
         badges: (d: any) =>
           d.id.includes('badges')
             ? [
-                { text: 'A', position: 'right-top', backgroundFill: '#8291b2' },
-                { text: 'Important', position: 'right', backgroundFill: '#e66c5b' },
-                { text: 'Notice', position: 'right-bottom', backgroundFill: '#e5b95e' },
+                { text: 'A', position: 'right-top' },
+                { text: 'Important', position: 'right' },
+                { text: 'Notice', position: 'right-bottom' },
               ]
             : [],
-        badgeFill: '#fff',
         badgeFontSize: 8,
         badgePadding: [1, 4],
       },
-      state: {
-        active: {
-          halo: true,
-        },
-        selected: {
-          halo: true,
-          lineWidth: 2,
-          stroke: '#000',
-        },
-        highlight: {
-          halo: false,
-          lineWidth: 2,
-          stroke: '#000',
-        },
-        inactive: {
-          opacity: 0.2,
-        },
-      },
     },
     layout: {
       type: 'grid',
     },
-    animation: false,
+    animation,
   });
 
   await graph.render();
@@ -82,4 +61,5 @@ export const nodeRect: StaticTestCase = async (context) => {
   graph.setElementState('rect-selected', 'selected');
   graph.setElementState('rect-highlight', 'highlight');
   graph.setElementState('rect-inactive', 'inactive');
+  graph.setElementState('rect-disabled', 'disabled');
 };
diff --git a/packages/g6/__tests__/demo/static/node-star.ts b/packages/g6/__tests__/demo/static/node-star.ts
index 63d4788a520..82979f38f1a 100644
--- a/packages/g6/__tests__/demo/static/node-star.ts
+++ b/packages/g6/__tests__/demo/static/node-star.ts
@@ -2,7 +2,7 @@ import { Graph } from '@/src';
 import type { StaticTestCase } from '../types';
 
 export const nodeStar: StaticTestCase = async (context) => {
-  const { canvas } = context;
+  const { canvas, animation, theme } = context;
 
   const data = {
     nodes: [
@@ -14,17 +14,19 @@ export const nodeStar: StaticTestCase = async (context) => {
       { id: 'star-selected' },
       { id: 'star-highlight' },
       { id: 'star-inactive' },
+      { id: 'star-disabled' },
     ],
   };
 
   const graph = new Graph({
     container: canvas,
+    theme,
     data,
     node: {
       style: {
         type: 'star', // 👈🏻 Node shape type.
         size: 40,
-        fill: '#1783FF',
+        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'),
@@ -32,44 +34,22 @@ export const nodeStar: StaticTestCase = async (context) => {
           d.id.includes('ports')
             ? [{ position: 'left' }, { position: 'right' }, { position: 'top' }, { position: 'bottom' }]
             : [],
-        portStroke: '#31d0c6',
-        portFill: '#fff',
-        portR: 2,
-        portLineWidth: 1,
         badges: (d: any) =>
           d.id.includes('badges')
             ? [
-                { text: 'A', position: 'right-top', backgroundFill: '#8291b2' },
-                { text: 'Important', position: 'right', backgroundFill: '#e66c5b' },
-                { text: 'Notice', position: 'right-bottom', backgroundFill: '#e5b95e' },
+                { text: 'A', position: 'right-top' },
+                { text: 'Important', position: 'right' },
+                { text: 'Notice', position: 'right-bottom' },
               ]
             : [],
-        badgeFill: '#fff',
         badgeFontSize: 8,
         badgePadding: [1, 4],
       },
-      state: {
-        active: {
-          halo: true,
-        },
-        selected: {
-          halo: true,
-          lineWidth: 2,
-          stroke: '#000',
-        },
-        highlight: {
-          halo: false,
-          lineWidth: 2,
-          stroke: '#000',
-        },
-        inactive: {
-          opacity: 0.2,
-        },
-      },
     },
     layout: {
       type: 'grid',
     },
+    animation,
   });
 
   await graph.render();
@@ -78,4 +58,5 @@ export const nodeStar: StaticTestCase = async (context) => {
   graph.setElementState('star-selected', 'selected');
   graph.setElementState('star-highlight', 'highlight');
   graph.setElementState('star-inactive', 'inactive');
+  graph.setElementState('star-disabled', 'disabled');
 };
diff --git a/packages/g6/__tests__/demo/static/node-triangle.ts b/packages/g6/__tests__/demo/static/node-triangle.ts
index 6bab6b8edac..0f63e4421b5 100644
--- a/packages/g6/__tests__/demo/static/node-triangle.ts
+++ b/packages/g6/__tests__/demo/static/node-triangle.ts
@@ -2,7 +2,7 @@ import { Graph } from '@/src';
 import type { StaticTestCase } from '../types';
 
 export const nodeTriangle: StaticTestCase = async (context) => {
-  const { canvas } = context;
+  const { canvas, animation, theme } = context;
 
   const data = {
     nodes: [
@@ -19,57 +19,35 @@ export const nodeTriangle: StaticTestCase = async (context) => {
 
   const graph = new Graph({
     container: canvas,
+    theme,
     data,
     node: {
       style: {
         type: 'triangle', // 👈🏻 Node shape type.
         size: 40,
         direction: (d: any) => d.data?.direction,
-        fill: '#1783FF',
+        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'),
         ports: (d: any) =>
           d.id.includes('ports') ? [{ position: 'left' }, { position: 'top' }, { position: 'bottom' }] : [],
-        portStroke: '#31d0c6',
-        portFill: '#fff',
-        portR: 2,
-        portLineWidth: 1,
         badges: (d: any) =>
           d.id.includes('badges')
             ? [
-                { text: 'A', position: 'right-top', backgroundFill: '#8291b2' },
-                { text: 'Important', position: 'right', backgroundFill: '#e66c5b' },
-                { text: 'Notice', position: 'right-bottom', backgroundFill: '#e5b95e' },
+                { text: 'A', position: 'right-top' },
+                { text: 'Important', position: 'right' },
+                { text: 'Notice', position: 'right-bottom' },
               ]
             : [],
-        badgeFill: '#fff',
         badgeFontSize: 8,
         badgePadding: [1, 4],
       },
-      state: {
-        active: {
-          halo: true,
-        },
-        selected: {
-          halo: true,
-          lineWidth: 2,
-          stroke: '#000',
-        },
-        highlight: {
-          halo: false,
-          lineWidth: 2,
-          stroke: '#000',
-        },
-        inactive: {
-          opacity: 0.2,
-        },
-      },
     },
     layout: {
       type: 'grid',
     },
-    animation: false,
+    animation,
   });
 
   await graph.render();
diff --git a/packages/g6/__tests__/demo/types.ts b/packages/g6/__tests__/demo/types.ts
index 6fadf75842d..8348e03bf2c 100644
--- a/packages/g6/__tests__/demo/types.ts
+++ b/packages/g6/__tests__/demo/types.ts
@@ -22,6 +22,12 @@ type TestCaseContext = {
    * <en/> Test case environment
    */
   env: 'test' | 'dev';
+  /**
+   * <zh/> 测试用例主题
+   *
+   * <en/> Test case theme
+   */
+  theme: string;
 };
 
 export type TestCase = StaticTestCase | AnimationTestCase;
diff --git a/packages/g6/__tests__/index.html b/packages/g6/__tests__/index.html
index 82184f6f5fd..45b0aef76c1 100644
--- a/packages/g6/__tests__/index.html
+++ b/packages/g6/__tests__/index.html
@@ -84,7 +84,7 @@
           <option value="webgl">WebGL</option>
         </select>
         <label for="theme">Theme: </label>
-        <button onclick="toggleTheme()">Toggle</button>
+        <button id="theme-button">Toggle</button>
         <div style="display: flex; align-items: center">
           <label for="animation" title="For Static Case To Control Animation">Animation: </label>
           <input id="animation-checkbox" type="checkbox" />
@@ -95,15 +95,6 @@
     </div>
 
     <script>
-      function toggleTheme() {
-        const theme = document.documentElement.getAttribute('data-theme');
-        if (theme === 'light') {
-          document.documentElement.setAttribute('data-theme', 'dark');
-        } else {
-          document.documentElement.setAttribute('data-theme', 'light');
-        }
-      }
-
       (function draggable() {
         const draggableElement = document.getElementById('panel');
         let offsetX,
diff --git a/packages/g6/__tests__/integration/animation.spec.ts b/packages/g6/__tests__/integration/animation.spec.ts
index 4b57c8a2d7d..fb3017dbfd1 100644
--- a/packages/g6/__tests__/integration/animation.spec.ts
+++ b/packages/g6/__tests__/integration/animation.spec.ts
@@ -13,7 +13,7 @@ describe('static', () => {
 
         await preprocess?.();
         await canvas.init();
-        const animationResult = await testCase({ env: 'test', canvas, animation: true, expect });
+        const animationResult = await testCase({ env: 'test', canvas, animation: true, expect, theme: 'light' });
 
         if (!animationResult) throw new Error('animation result should not be null');
 
diff --git a/packages/g6/__tests__/integration/snapshots/animation/controller-element-1000(3_3).svg b/packages/g6/__tests__/integration/snapshots/animation/controller-element-1000(3_3).svg
index 059da56e699..9729823cd5c 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/controller-element-1000(3_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/controller-element-1000(3_3).svg
@@ -18,13 +18,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-2-node-3"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,133.320496,155.546997)">
             <path
               id="key"
               fill="none"
               d="M 58.358994113243114,38.90599607549541 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 63,0 L 0,84"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -34,10 +49,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
+              stroke-width="0"
               stroke="rgba(0,128,0,1)"
               r="10"
             />
@@ -47,11 +63,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -60,11 +77,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(255,165,0,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(255,165,0,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -73,11 +91,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(128,0,128,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(128,0,128,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -86,11 +105,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(0,255,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(0,255,255,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
diff --git a/packages/g6/__tests__/integration/snapshots/animation/controller-element-200(2_3).svg b/packages/g6/__tests__/integration/snapshots/animation/controller-element-200(2_3).svg
index 3dc58c4e352..a358e9a9f39 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/controller-element-200(2_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/controller-element-200(2_3).svg
@@ -18,13 +18,29 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-1-node-2"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,60,50)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 130,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+              opacity="0.37293273049835485"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 130,0"
+              stroke-width="3"
+              stroke="transparent"
               opacity="0.37293273049835485"
             />
           </g>
@@ -36,13 +52,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-2-node-3"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,132.455109,143.565216)">
             <path
               id="key"
               fill="none"
               d="M 60.08977711085029,0 C 30.04488855542516 3.4648363177795716,0 6.929672635559172,0 6.929672635559172"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 63,0 L 0,84"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -53,13 +84,29 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-3-node-1"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,56,58)">
             <path
               id="key"
               fill="none"
               d="M 63,84 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+              opacity="0.37293273049835485"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 63,84 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
               opacity="0.37293273049835485"
             />
           </g>
@@ -70,11 +117,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
               opacity="0.37293273049835485"
             />
@@ -84,11 +132,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(52,138,65,1)"
+              stroke-width="0"
+              stroke="rgba(0,80,0,1)"
               r="10"
             />
           </g>
@@ -97,11 +146,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -110,11 +160,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(255,165,0,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(255,165,0,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
               opacity="0.6270672695016452"
             />
@@ -124,11 +175,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(128,0,128,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(128,0,128,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
               opacity="0.6270672695016452"
             />
@@ -138,11 +190,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(0,255,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(0,255,255,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
               opacity="0.6270672695016452"
             />
diff --git a/packages/g6/__tests__/integration/snapshots/animation/controller-element-50(1_3).svg b/packages/g6/__tests__/integration/snapshots/animation/controller-element-50(1_3).svg
index 6f733530e6f..5741bb6bdeb 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/controller-element-50(1_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/controller-element-50(1_3).svg
@@ -18,13 +18,29 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-1-node-2"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,60,50)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 130,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+              opacity="0.8255817601983712"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 130,0"
+              stroke-width="3"
+              stroke="transparent"
               opacity="0.8255817601983712"
             />
           </g>
@@ -36,13 +52,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-2-node-3"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,131.404739,81.799889)">
             <path
               id="key"
               fill="none"
               d="M 62.19052392232285,0 C 31.09526196116144 31.281476251723106,0 62.5629525034462,0 62.5629525034462"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 63,0 L 0,84"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -53,13 +84,29 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-3-node-1"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,56,58)">
             <path
               id="key"
               fill="none"
               d="M 63,84 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+              opacity="0.8255817601983712"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 63,84 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
               opacity="0.8255817601983712"
             />
           </g>
@@ -70,11 +117,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
               opacity="0.8255817601983712"
             />
@@ -84,11 +132,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(115,150,144,1)"
+              stroke-width="0"
+              stroke="rgba(0,22,0,1)"
               r="10"
             />
           </g>
@@ -97,11 +146,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -110,11 +160,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(255,165,0,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(255,165,0,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
               opacity="0.17441823980162885"
             />
@@ -124,11 +175,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(128,0,128,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(128,0,128,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
               opacity="0.17441823980162885"
             />
@@ -138,11 +190,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(0,255,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(0,255,255,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
               opacity="0.17441823980162885"
             />
diff --git a/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-0(1_3).svg b/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-0(1_3).svg
index 2f1f8620e40..38fbc2cacc9 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-0(1_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-0(1_3).svg
@@ -18,13 +18,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-1-node-2"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,250,200)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -35,13 +50,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-2-node-3"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,250,200)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -52,13 +82,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-3-node-1"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,250,200)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -69,13 +114,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-3-node-5"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,250,200)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -86,13 +146,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-2-node-4"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,250,200)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -103,13 +178,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-2-node-5"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,250,200)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -120,13 +210,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-3-node-6"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,250,200)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -137,13 +242,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-4-node-5"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,250,200)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -154,13 +274,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-5-node-6"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,250,200)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -170,11 +305,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -183,11 +319,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -196,11 +333,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -209,11 +347,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -222,11 +361,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -235,11 +375,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
diff --git a/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-1000(3_3).svg b/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-1000(3_3).svg
index ab19f5db0e9..fb8dbfec08e 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-1000(3_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-1000(3_3).svg
@@ -18,13 +18,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-1-node-2"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,181,108)">
             <path
               id="key"
               fill="none"
               d="M 63,0 L 0,84"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -35,13 +50,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-2-node-3"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,185,200)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 130,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -52,13 +82,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-3-node-1"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,256,108)">
             <path
               id="key"
               fill="none"
               d="M 63,84 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -69,13 +114,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-3-node-5"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,256,208)">
             <path
               id="key"
               fill="none"
               d="M 63,0 L 0,84"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -86,13 +146,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-2-node-4"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,106,208)">
             <path
               id="key"
               fill="none"
               d="M 63,0 L 0,84"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -103,13 +178,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-2-node-5"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,181,208)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 63,84"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -120,13 +210,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-3-node-6"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,331,208)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 63,84"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -137,13 +242,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-4-node-5"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,110,300)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 130,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -154,13 +274,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-5-node-6"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,260,300)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 130,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -170,11 +305,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -183,11 +319,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -196,11 +333,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -209,11 +347,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -222,11 +361,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -235,11 +375,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
diff --git a/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-200(2_3).svg b/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-200(2_3).svg
index faae79d63b5..2f4af604f89 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-200(2_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-200(2_3).svg
@@ -18,13 +18,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-1-node-2"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,206.732361,142.309814)">
             <path
               id="key"
               fill="none"
               d="M 39.505237978603674,0 C 19.75261898930185 26.336825319069106,0 52.67365063813821,0 52.67365063813821"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -35,13 +50,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-2-node-3"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,209.240631,200)">
             <path
               id="key"
               fill="none"
               d="M 0,0 C 40.75937251760695 0,81.5187450352139 0,81.5187450352139 0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -52,13 +82,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-3-node-1"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,253.762405,142.309814)">
             <path
               id="key"
               fill="none"
               d="M 39.505237978603645,52.67365063813821 C 19.752618989301823 26.336825319069106,0 0,0 0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -69,13 +114,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-3-node-5"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,253.762405,205.016541)">
             <path
               id="key"
               fill="none"
               d="M 39.505237978603645,0 C 19.752618989301823 26.336825319069078,0 52.67365063813821,0 52.67365063813821"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -86,13 +146,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-2-node-4"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,159.702316,205.016541)">
             <path
               id="key"
               fill="none"
               d="M 39.505237978603674,0 C 19.75261898930185 26.336825319069078,2.842170943040401e-14 52.67365063813821,2.842170943040401e-14 52.67365063813821"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -103,13 +178,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-2-node-5"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,206.732361,205.016541)">
             <path
               id="key"
               fill="none"
               d="M 0,0 C 19.75261898930185 26.336825319069078,39.505237978603674 52.67365063813821,39.505237978603674 52.67365063813821"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -120,13 +210,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-3-node-6"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,300.792450,205.016541)">
             <path
               id="key"
               fill="none"
               d="M 0,0 C 19.752618989301823 26.336825319069078,39.505237978603645 52.67365063813821,39.505237978603645 52.67365063813821"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -137,13 +242,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-4-node-5"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,162.210587,262.706726)">
             <path
               id="key"
               fill="none"
               d="M 0,0 C 40.75937251760692 0,81.51874503521387 0,81.51874503521387 0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -154,13 +274,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-5-node-6"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,256.270660,262.706726)">
             <path
               id="key"
               fill="none"
               d="M 0,0 C 40.75937251760695 0,81.51874503521384 0,81.51874503521384 0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -170,11 +305,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -183,11 +319,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -196,11 +333,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -213,11 +351,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -226,11 +365,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -243,11 +383,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
diff --git a/packages/g6/__tests__/integration/snapshots/animation/controller-element-state-0(1_2).svg b/packages/g6/__tests__/integration/snapshots/animation/controller-element-state-0(1_2).svg
index 1032e6d0a42..0e3cc9aabc8 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/controller-element-state-0(1_2).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/controller-element-state-0(1_2).svg
@@ -18,6 +18,14 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-1-node-2"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="4"
+          />
           <g transform="matrix(1,0,0,1,60,50)">
             <path
               id="key"
@@ -26,6 +34,13 @@
               stroke-width="2"
               stroke="rgba(255,192,203,1)"
             />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 130,0"
+              stroke-width="2"
+              stroke="transparent"
+            />
           </g>
         </g>
         <g
@@ -35,13 +50,50 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-2-node-3"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
+          <g transform="matrix(1,0,0,1,131,58)">
+            <path
+              id="halo"
+              fill="none"
+              d="M 63,0 L 0,84"
+              stroke-width="12"
+              stroke="rgba(153,173,209,1)"
+              stroke-dasharray="0,0"
+              pointer-events="none"
+              stroke-opacity="0.25"
+            />
+            <path
+              id="halo"
+              fill="none"
+              d="M 63,0 L 0,84"
+              stroke-width="14"
+              stroke="transparent"
+              stroke-dasharray="0,0"
+              pointer-events="none"
+              stroke-opacity="0.25"
+            />
+          </g>
           <g transform="matrix(1,0,0,1,131,58)">
             <path
               id="key"
               fill="none"
               d="M 63,0 L 0,84"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 63,0 L 0,84"
+              stroke-width="1"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -52,13 +104,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-3-node-1"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,56,58)">
             <path
               id="key"
               fill="none"
               d="M 63,84 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 63,84 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -72,36 +139,66 @@
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
               stroke-width="2"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
         </g>
         <g id="node-2" fill="none" transform="matrix(1,0,0,1,200,50)">
+          <g transform="matrix(1,0,0,1,0,0)">
+            <circle
+              id="halo"
+              fill="none"
+              transform="translate(-10,-10)"
+              cx="10"
+              cy="10"
+              stroke-width="12"
+              stroke="rgba(34,126,255,1)"
+              r="10"
+              stroke-dasharray="0,0"
+              stroke-opacity="0.25"
+              pointer-events="none"
+            />
+          </g>
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
               stroke-width="1"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
         </g>
         <g id="node-3" fill="none" transform="matrix(1,0,0,1,125,150)">
+          <g transform="matrix(1,0,0,1,0,0)">
+            <circle
+              id="halo"
+              fill="none"
+              transform="translate(-10,-10)"
+              cx="10"
+              cy="10"
+              stroke-width="12"
+              stroke="rgba(34,126,255,1)"
+              r="10"
+              stroke-dasharray="0,0"
+              stroke-opacity="0.25"
+              pointer-events="none"
+            />
+          </g>
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
               stroke-width="2"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
diff --git a/packages/g6/__tests__/integration/snapshots/animation/controller-element-state-1000(2_2).svg b/packages/g6/__tests__/integration/snapshots/animation/controller-element-state-1000(2_2).svg
index edf44a8067b..c1c410eae41 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/controller-element-state-1000(2_2).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/controller-element-state-1000(2_2).svg
@@ -18,13 +18,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-1-node-2"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="4"
+          />
           <g transform="matrix(1,0,0,1,60,50)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 130,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 130,0"
+              stroke-width="1"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -35,6 +50,36 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-2-node-3"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
+          <g transform="matrix(1,0,0,1,131,58)">
+            <path
+              id="halo"
+              fill="none"
+              d="M 63,0 L 0,84"
+              stroke-width="12"
+              stroke="rgba(255,192,203,1)"
+              stroke-dasharray="0,0"
+              pointer-events="none"
+              stroke-opacity="0.25"
+            />
+            <path
+              id="halo"
+              fill="none"
+              d="M 63,0 L 0,84"
+              stroke-width="14"
+              stroke="transparent"
+              stroke-dasharray="0,0"
+              pointer-events="none"
+              stroke-opacity="0.25"
+            />
+          </g>
           <g transform="matrix(1,0,0,1,131,58)">
             <path
               id="key"
@@ -43,6 +88,13 @@
               stroke-width="2"
               stroke="rgba(255,192,203,1)"
             />
+            <path
+              id="key"
+              fill="none"
+              d="M 63,0 L 0,84"
+              stroke-width="2"
+              stroke="transparent"
+            />
           </g>
         </g>
         <g
@@ -52,13 +104,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-3-node-1"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,56,58)">
             <path
               id="key"
               fill="none"
               d="M 63,84 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 63,84 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -68,31 +135,61 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
               stroke-width="1"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
         </g>
         <g id="node-2" fill="none" transform="matrix(1,0,0,1,200,50)">
+          <g transform="matrix(1,0,0,1,0,0)">
+            <circle
+              id="halo"
+              fill="none"
+              transform="translate(-10,-10)"
+              cx="10"
+              cy="10"
+              stroke-width="12"
+              stroke="rgba(34,126,255,1)"
+              r="10"
+              stroke-dasharray="0,0"
+              stroke-opacity="0.25"
+              pointer-events="none"
+            />
+          </g>
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
               stroke-width="2"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
         </g>
         <g id="node-3" fill="none" transform="matrix(1,0,0,1,125,150)">
+          <g transform="matrix(1,0,0,1,0,0)">
+            <circle
+              id="halo"
+              fill="none"
+              transform="translate(-10,-10)"
+              cx="10"
+              cy="10"
+              stroke-width="12"
+              stroke="rgba(255,192,203,1)"
+              r="10"
+              stroke-dasharray="0,0"
+              stroke-opacity="0.25"
+              pointer-events="none"
+            />
+          </g>
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
@@ -100,8 +197,8 @@
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
-              stroke-width="1"
+              stroke-width="3"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-element-position.svg b/packages/g6/__tests__/integration/snapshots/static/controller-element-position.svg
index ab19f5db0e9..fb8dbfec08e 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-element-position.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-element-position.svg
@@ -18,13 +18,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-1-node-2"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,181,108)">
             <path
               id="key"
               fill="none"
               d="M 63,0 L 0,84"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -35,13 +50,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-2-node-3"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,185,200)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 130,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -52,13 +82,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-3-node-1"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,256,108)">
             <path
               id="key"
               fill="none"
               d="M 63,84 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -69,13 +114,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-3-node-5"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,256,208)">
             <path
               id="key"
               fill="none"
               d="M 63,0 L 0,84"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -86,13 +146,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-2-node-4"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,106,208)">
             <path
               id="key"
               fill="none"
               d="M 63,0 L 0,84"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -103,13 +178,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-2-node-5"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,181,208)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 63,84"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -120,13 +210,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-3-node-6"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,331,208)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 63,84"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -137,13 +242,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-4-node-5"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,110,300)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 130,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -154,13 +274,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-5-node-6"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,260,300)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 130,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -170,11 +305,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -183,11 +319,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -196,11 +333,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -209,11 +347,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -222,11 +361,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -235,11 +375,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-element-visibility.svg b/packages/g6/__tests__/integration/snapshots/static/controller-element-visibility.svg
index de34f89b488..7976c07a917 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-element-visibility.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-element-visibility.svg
@@ -18,13 +18,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-1-node-2"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,60,50)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 130,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 130,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -35,6 +50,14 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-2-node-3"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,131,58)">
             <path
               id="key"
@@ -42,7 +65,16 @@
               d="M 63,0 L 0,84"
               stroke-width="1"
               opacity="0.5"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+              visibility="visible"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 63,0 L 0,84"
+              stroke-width="3"
+              opacity="0.5"
+              stroke="transparent"
               visibility="visible"
             />
           </g>
@@ -54,13 +86,29 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-3-node-1"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,56,58)">
             <path
               id="key"
               fill="none"
               d="M 63,84 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+              visibility="visible"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 63,84 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
               visibility="visible"
             />
           </g>
@@ -71,11 +119,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -84,11 +133,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -97,11 +147,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               opacity="0.5"
               r="10"
               visibility="visible"
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-element-visibility__hidden.svg b/packages/g6/__tests__/integration/snapshots/static/controller-element-visibility__hidden.svg
index 381414c1042..b99726a3897 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-element-visibility__hidden.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-element-visibility__hidden.svg
@@ -18,13 +18,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-1-node-2"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,60,50)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 130,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 130,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -35,6 +50,14 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-2-node-3"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,131,58)">
             <path
               id="key"
@@ -42,7 +65,16 @@
               d="M 63,0 L 0,84"
               stroke-width="1"
               opacity="0.5"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+              visibility="hidden"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 63,0 L 0,84"
+              stroke-width="3"
+              opacity="0.5"
+              stroke="transparent"
               visibility="hidden"
             />
           </g>
@@ -54,13 +86,29 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-3-node-1"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,56,58)">
             <path
               id="key"
               fill="none"
               d="M 63,84 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+              visibility="hidden"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 63,84 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
               visibility="hidden"
             />
           </g>
@@ -71,11 +119,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -84,11 +133,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -97,11 +147,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               opacity="0.5"
               r="10"
               visibility="hidden"
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-element-z-index.svg b/packages/g6/__tests__/integration/snapshots/static/controller-element-z-index.svg
index 10e474f3216..b6da06ee81c 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-element-z-index.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-element-z-index.svg
@@ -20,7 +20,8 @@
               transform="translate(-25,-25)"
               cx="25"
               cy="25"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="25"
             />
           </g>
@@ -33,7 +34,8 @@
               transform="translate(-25,-25)"
               cx="25"
               cy="25"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="25"
             />
           </g>
@@ -46,7 +48,8 @@
               transform="translate(-25,-25)"
               cx="25"
               cy="25"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="25"
             />
           </g>
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-element-z-index__back.svg b/packages/g6/__tests__/integration/snapshots/static/controller-element-z-index__back.svg
index 7846b214543..de9a6b36ee9 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-element-z-index__back.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-element-z-index__back.svg
@@ -20,7 +20,8 @@
               transform="translate(-25,-25)"
               cx="25"
               cy="25"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="25"
             />
           </g>
@@ -33,7 +34,8 @@
               transform="translate(-25,-25)"
               cx="25"
               cy="25"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="25"
             />
           </g>
@@ -46,7 +48,8 @@
               transform="translate(-25,-25)"
               cx="25"
               cy="25"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="25"
             />
           </g>
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-element-z-index__front.svg b/packages/g6/__tests__/integration/snapshots/static/controller-element-z-index__front.svg
index d774c44321e..d132a91a2dc 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-element-z-index__front.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-element-z-index__front.svg
@@ -20,7 +20,8 @@
               transform="translate(-25,-25)"
               cx="25"
               cy="25"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="25"
             />
           </g>
@@ -33,7 +34,8 @@
               transform="translate(-25,-25)"
               cx="25"
               cy="25"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="25"
             />
           </g>
@@ -46,7 +48,8 @@
               transform="translate(-25,-25)"
               cx="25"
               cy="25"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="25"
             />
           </g>
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-element.svg b/packages/g6/__tests__/integration/snapshots/static/controller-element.svg
index bdbfbfdc6d9..812c4ba8bb0 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-element.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-element.svg
@@ -18,13 +18,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-1-node-2"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,60,50)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 130,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 130,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -35,13 +50,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-2-node-3"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,131,58)">
             <path
               id="key"
               fill="none"
               d="M 63,0 L 0,84"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 63,0 L 0,84"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -52,13 +82,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="node-3-node-1"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,56,58)">
             <path
               id="key"
               fill="none"
               d="M 63,84 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 63,84 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -68,11 +113,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -81,11 +127,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -94,11 +141,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-layout-circular.svg b/packages/g6/__tests__/integration/snapshots/static/controller-layout-circular.svg
index 4949b14a2db..cf153d46b22 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-layout-circular.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-layout-circular.svg
@@ -18,13 +18,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,220.933777,50.980171)">
             <path
               id="key"
               fill="none"
               d="M 19.11437192168171,0 L 0,1.8826017960431898"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -35,13 +50,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="1"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,256.343933,218.712036)">
             <path
               id="key"
               fill="none"
               d="M 0,223.5578568864364 L 183.46917832520296,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -52,13 +82,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="2"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,211.962112,63.794792)">
             <path
               id="key"
               fill="none"
               d="M 37.05772349420914,376.25336037806494 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -69,13 +114,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="3"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,257.730103,56.343933)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 180.6968347127754,148.2940675169018"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -86,13 +146,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="4"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,219.296631,59.398647)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 218.5457177450744,146.02758364314883"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -103,13 +178,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="5"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,250,60)">
             <path
               id="key"
               fill="none"
               d="M 0,380 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -120,13 +210,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="6"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,55.793850,220.789780)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 25.961326169895756,130.5164049611013"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -137,13 +242,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="7"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,183.415161,66.204262)">
             <path
               id="key"
               fill="none"
               d="M 167.74703182240486,16.521643812284225 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -154,13 +274,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="8"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,60.186878,72.954193)">
             <path
               id="key"
               fill="none"
               d="M 0,130.29763407571858 L 106.93250693614942,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -171,13 +306,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="9"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,90.777145,90.777145)">
             <path
               id="key"
               fill="none"
               d="M 0,263.2658309900386 L 263.2658309900386,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -188,13 +338,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="10"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,86.608925,74.793495)">
             <path
               id="key"
               fill="none"
               d="M 83.95154650426696,0 L 0,276.7511469732767"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -205,13 +370,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="11"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,63.081741,87.532913)">
             <path
               id="key"
               fill="none"
               d="M 0,119.6221873990226 L 288.7935084286456,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -222,13 +402,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="12"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,182.282532,293.732025)">
             <path
               id="key"
               fill="none"
               d="M 255.05530056755367,0 L 0,136.32990777857424"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -239,13 +434,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="13"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,113.292610,117.397858)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 171.01148751597304,319.9399745609495"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -256,13 +466,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="14"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,296.089142,296.089142)">
             <path
               id="key"
               fill="none"
               d="M 142.9968414270503,0 L 0,142.9968414270503"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -273,13 +498,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="15"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,110.529549,118.386497)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 60.98286741594552,306.58156005989997"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -290,13 +530,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="16"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,183.415161,435.756073)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 95.65105374440199,9.420793839129487"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -307,13 +562,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="17"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,117.397858,113.292610)">
             <path
               id="key"
               fill="none"
               d="M 319.9399745609495,171.01148751597304 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -324,13 +594,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="18"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,117.817436,253.826828)">
             <path
               id="key"
               fill="none"
               d="M 0,133.76768755484795 L 322.9437655505411,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -341,13 +626,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="19"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,72.295158,180.534393)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 247.17045592900342,247.17045592900342"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -358,13 +658,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="20"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,332.092377,258.314697)">
             <path
               id="key"
               fill="none"
               d="M 112.35191306187482,0 L 0,168.14651727722014"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -375,13 +690,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="21"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,67.174995,183.271164)">
             <path
               id="key"
               fill="none"
               d="M 39.45274645084888,198.34233278794997 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -392,13 +722,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="22"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,75.031944,175.414215)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 365.1602037677201,72.63487593011422"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -409,13 +754,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="23"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,118.386497,393.372253)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 198.34233278794997,39.45274645084885"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -426,13 +786,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="24"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,327.516846,75.175941)">
             <path
               id="key"
               fill="none"
               d="M 32.61701911937098,331.16612969856146 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -443,13 +818,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="25"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,416.293915,148.885956)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 0,202.22808837890625"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -460,13 +850,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="26"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,368.185120,368.185120)">
             <path
               id="key"
               fill="none"
               d="M 0,41.0377349817378 L 41.0377349817378,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -477,13 +882,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="27"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,334.266785,71.568024)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 74.29702427972995,60.9739987213389"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -494,13 +914,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="28"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,329.439514,74.793495)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 83.95153932677465,276.7511468361937"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -511,13 +946,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="29"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,363.064941,148.693802)">
             <path
               id="key"
               fill="none"
               d="M 0,257.7922533323914 L 51.278064385942116,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -528,13 +978,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="30"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,54.713966,258.819214)">
             <path
               id="key"
               fill="none"
               d="M 79.45802053681615,148.65548979509992 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -545,13 +1010,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="31"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,62.662159,113.292610)">
             <path
               id="key"
               fill="none"
               d="M 0,171.01148776456262 L 319.9399858721674,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -562,13 +1042,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="32"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,50.980171,259.951843)">
             <path
               id="key"
               fill="none"
               d="M 1.8826017960431756,19.11437192168171 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -579,13 +1074,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="33"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,145.229889,116.308746)">
             <path
               id="key"
               fill="none"
               d="M 239.84753459116655,0 L 0,292.25506202419"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -596,13 +1106,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="34"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,59.398647,297.332764)">
             <path
               id="key"
               fill="none"
               d="M 73.93160535617528,110.64645660707367 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -613,13 +1138,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="35"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,59.238796,112.405479)">
             <path
               id="key"
               fill="none"
               d="M 0,133.76768755484795 L 322.9437655505411,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -630,13 +1170,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="36"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,92.525291,143.599930)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 333.43140638779505,178.2227919062151"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -647,13 +1202,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="37"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,217.325867,181.193420)">
             <path
               id="key"
               fill="none"
               d="M 211.10610950822687,0 L 0,257.23351704275046"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -664,13 +1234,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="38"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,434.775909,183.463318)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 0,133.0733642578125"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -681,13 +1266,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="39"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,87.532913,148.124756)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 119.6221871557126,288.79349708533607"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -698,13 +1298,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="40"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,219.801147,331.250641)">
             <path
               id="key"
               fill="none"
               d="M 0,110.19242726051186 L 206.1555501855729,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -715,13 +1330,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="41"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,93.657928,139.866135)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 331.1661373238004,32.617019161563576"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -732,13 +1362,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="42"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,75.031944,328.487579)">
             <path
               id="key"
               fill="none"
               d="M 306.58156005989997,60.98286741594552 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -749,13 +1394,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="43"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,148.693802,55.793850)">
             <path
               id="key"
               fill="none"
               d="M 0,25.961326169895756 L 130.5164049611013,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -766,13 +1426,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="44"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,71.568024,61.573048)">
             <path
               id="key"
               fill="none"
               d="M 211.10610982640148,0 L 0,257.23352822572315"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -783,13 +1458,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="45"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,145.229889,91.436180)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 239.8475347791416,292.2550694993174"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -800,13 +1490,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="46"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,68.126938,93.275482)">
             <path
               id="key"
               fill="none"
               d="M 0,223.6917979844958 L 67.85617120826088,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -817,13 +1522,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="47"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,291.920898,63.412350)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 96.5975963365546,318.43960436134387"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -834,13 +1554,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="48"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,182.282532,69.938057)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 255.05530056755367,136.32990777857424"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -851,13 +1586,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="49"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,181.778015,255.555710)">
             <path
               id="key"
               fill="none"
               d="M 259.90729004464333,0 L 0,173.66450452130326"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -868,13 +1618,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="50"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,220.789780,55.793850)">
             <path
               id="key"
               fill="none"
               d="M 130.5164049611013,25.961326169895756 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -885,13 +1650,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="51"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,298.587463,437.678741)">
             <path
               id="key"
               fill="none"
               d="M 0,5.575446850333606 L 18.379807078055023,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -902,13 +1682,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="52"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,59.569405,252.902847)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 347.155108078984,105.30835064862879"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -919,13 +1714,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="53"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,75.224091,326.536682)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 349.55181884765625,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -936,13 +1746,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="54"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,397.765289,116.308746)">
             <path
               id="key"
               fill="none"
               d="M 12.184695831015688,14.847100547640366 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -953,13 +1778,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="55"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,220.551331,394.324188)">
             <path
               id="key"
               fill="none"
               d="M 161.30061550432004,0 L 0,48.92999499134362"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -970,13 +1810,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="56"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,181.193420,217.325867)">
             <path
               id="key"
               fill="none"
               d="M 257.23351704275046,0 L 0,211.10610950822687"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -987,13 +1842,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="57"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,421.007874,335.355896)">
             <path
               id="key"
               fill="none"
               d="M 0,16.938938800089886 L 9.054056101053561,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1004,13 +1874,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="58"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,213.884781,63.412350)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 109.7490551220892,361.79415757025845"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1021,13 +1906,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="59"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,215.695908,117.397858)">
             <path
               id="key"
               fill="none"
               d="M 171.01148751597304,0 L 0,319.9399745609495"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1038,13 +1938,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="60"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,182.702118,330.363525)">
             <path
               id="key"
               fill="none"
               d="M 242.83500109888158,0 L 0,100.58555817353385"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1055,13 +1970,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="61"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,220.933777,435.756073)">
             <path
               id="key"
               fill="none"
               d="M 0,9.420793839129487 L 95.65105374440199,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1072,13 +2002,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="62"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,219.801147,331.250641)">
             <path
               id="key"
               fill="none"
               d="M 0,110.19242726051186 L 206.1555501855729,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1089,13 +2034,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="63"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,183.463318,434.775909)">
             <path
               id="key"
               fill="none"
               d="M 133.0733642578125,0 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1105,11 +2065,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1122,11 +2083,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1139,11 +2101,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1156,11 +2119,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1173,11 +2137,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1190,11 +2155,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1207,11 +2173,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1224,11 +2191,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1237,11 +2205,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1254,11 +2223,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1271,11 +2241,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1288,11 +2259,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1305,11 +2277,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1322,11 +2295,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1339,11 +2313,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1356,11 +2331,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1369,11 +2345,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1386,11 +2363,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1403,11 +2381,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1420,11 +2399,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1437,11 +2417,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1454,11 +2435,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1471,11 +2453,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1488,11 +2471,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1501,11 +2485,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1518,11 +2503,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1535,11 +2521,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1552,11 +2539,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1569,11 +2557,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1586,11 +2575,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1603,11 +2593,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1620,11 +2611,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-layout-compact-box.svg b/packages/g6/__tests__/integration/snapshots/static/controller-layout-compact-box.svg
index 0074bd5727d..81fa8792922 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-layout-compact-box.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-layout-compact-box.svg
@@ -18,13 +18,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Modeling Methods-Classification"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,-212.004059,-334.996948)">
             <path
               id="key"
               fill="none"
               d="M 0,298.99390450538056 L 224.00813162942802,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -35,13 +50,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Modeling Methods-Consensus"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,-208.251923,-25.769508)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 216.5038558094344,49.5390178547011"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -52,13 +82,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Modeling Methods-Regression"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,-212.004059,-19.996952)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 224.00813162942802,298.99390450538056"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -69,13 +114,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Classification-Logistic regression"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,26.804710,-464.259003)">
             <path
               id="key"
               fill="none"
               d="M 0,116.51800353929968 L 216.3905780015565,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -86,13 +146,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Classification-Linear discriminant analysis"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,27.333456,-429.410217)">
             <path
               id="key"
               fill="none"
               d="M 0,82.82041841382261 L 215.33308787593882,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -103,13 +178,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Classification-Rules"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,27.743912,-394.751404)">
             <path
               id="key"
               fill="none"
               d="M 0,49.50280986602479 L 214.51217608610762,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -120,13 +210,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Classification-Decision trees"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,27.970545,-360.233032)">
             <path
               id="key"
               fill="none"
               d="M 0,16.46607002230519 L 214.05891028996837,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -137,13 +242,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Classification-Naive Bayes"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,27.970545,-342.233032)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 214.05891028996837,16.46607002230519"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -154,13 +274,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Classification-K nearest neighbor"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,27.743912,-340.751404)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 214.51217608610762,49.50280986602479"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -171,13 +306,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Classification-Probabilistic neural network"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,27.333456,-339.410217)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 215.33308787593882,82.82041841382261"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -188,13 +338,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Classification-Support vector machine"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,26.804710,-338.259003)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 216.3905780015565,116.51800353929966"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -205,13 +370,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Consensus-Models diversity"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,26.905046,-86.450256)">
             <path
               id="key"
               fill="none"
               d="M 0,107.90051955426699 L 211.18990579424906,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -222,13 +402,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Consensus-Methods"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,27.931210,27.170929)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 209.13758060193686,24.658142691058057"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -239,13 +434,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Consensus-Common"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,26.905046,30.549740)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 211.18990579424906,107.90051955426698"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -256,13 +466,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Models diversity-Different initializations"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,256.343628,-177.436752)">
             <path
               id="key"
               fill="none"
               d="M 0,82.87350835332218 L 217.3127552376004,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -273,13 +498,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Models diversity-Different parameter choices"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,256.748077,-142.769516)">
             <path
               id="key"
               fill="none"
               d="M 0,49.5390178547011 L 216.5038558094344,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -290,13 +530,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Models diversity-Different architectures"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,256.971039,-108.239494)">
             <path
               id="key"
               fill="none"
               d="M 0,16.478993925469865 L 216.05792035616037,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -307,13 +562,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Models diversity-Different modeling methods"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,256.971039,-90.239494)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 216.05792035616037,16.478993925469865"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -324,13 +594,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Models diversity-Different training sets"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,256.748077,-88.769508)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 216.5038558094344,49.53901785470109"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -341,13 +626,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Models diversity-Different feature sets"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,256.343628,-87.436752)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 217.3127552376004,82.8735083533222"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -358,13 +658,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Methods-Classifier selection"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,256.968719,35.790470)">
             <path
               id="key"
               fill="none"
               d="M 0,16.419059384997553 L 207.06258224413614,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -375,13 +690,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Methods-Classifier fusion"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,256.968719,53.790470)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 207.06258224413614,16.419059384997553"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -392,13 +722,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Common-Bagging"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,256.875488,108.573090)">
             <path
               id="key"
               fill="none"
               d="M 0,32.85382470251251 L 206.24901063243976,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -409,13 +754,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Common-Boosting"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,257,143)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 206,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -426,13 +786,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Common-AdaBoost"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,256.875488,144.573090)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 206.24901063243976,32.8538247025125"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -443,13 +818,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Regression-Multiple linear regression"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,27.543322,217.987473)">
             <path
               id="key"
               fill="none"
               d="M 0,66.02505057262121 L 210.9133559958733,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -460,13 +850,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Regression-Partial least squares"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,27.879711,252.546387)">
             <path
               id="key"
               fill="none"
               d="M 0,32.90722106017972 L 210.2405789955929,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -477,13 +882,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Regression-Multi-layer feed forward neural network"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,28,287)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 210,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -494,13 +914,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Regression-General regression neural network"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,27.879711,288.546387)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 210.2405789955929,32.90722106017972"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -511,13 +946,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Regression-Support vector regression"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,27.543322,289.987488)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 210.9133559958733,66.02505057262124"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -531,11 +981,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -543,9 +994,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 108.4,0 l 0,23 l-108.4 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="108.4"
                 height="23"
@@ -554,7 +1005,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -570,11 +1021,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -582,9 +1034,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 78.88,0 l 0,23 l-78.88 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="78.88"
                 height="23"
@@ -593,7 +1045,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -613,11 +1065,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -625,9 +1078,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 111.40000000000002,0 l 0,23 l-111.40000000000002 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="111.40000000000002"
                 height="23"
@@ -636,7 +1089,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -656,11 +1109,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -668,9 +1122,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 161.20000000000002,0 l 0,23 l-161.20000000000002 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="161.20000000000002"
                 height="23"
@@ -679,7 +1133,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -695,11 +1149,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -707,9 +1162,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 32.8,0 l 0,23 l-32.8 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="32.8"
                 height="23"
@@ -718,7 +1173,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -734,11 +1189,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -746,9 +1202,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 83.92,0 l 0,23 l-83.92 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="83.92"
                 height="23"
@@ -757,7 +1213,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -773,11 +1229,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -785,9 +1242,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 71.67999999999999,0 l 0,23 l-71.67999999999999 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="71.67999999999999"
                 height="23"
@@ -796,7 +1253,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -816,11 +1273,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -828,9 +1286,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 110.91999999999999,0 l 0,23 l-110.91999999999999 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="110.91999999999999"
                 height="23"
@@ -839,7 +1297,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -859,11 +1317,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -871,9 +1330,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 162.4,0 l 0,23 l-162.4 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="162.4"
                 height="23"
@@ -882,7 +1341,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -902,11 +1361,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -914,9 +1374,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 139.72000000000003,0 l 0,23 l-139.72000000000003 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="139.72000000000003"
                 height="23"
@@ -925,7 +1385,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -941,11 +1401,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -953,9 +1414,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 64.96000000000001,0 l 0,23 l-64.96000000000001 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="64.96000000000001"
                 height="23"
@@ -964,7 +1425,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -984,11 +1445,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -996,9 +1458,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 96.16000000000001,0 l 0,23 l-96.16000000000001 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="96.16000000000001"
                 height="23"
@@ -1007,7 +1469,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1027,11 +1489,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1039,9 +1502,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 131.68000000000004,0 l 0,23 l-131.68000000000004 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="131.68000000000004"
                 height="23"
@@ -1050,7 +1513,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1070,11 +1533,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1082,9 +1546,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 163.12,0 l 0,23 l-163.12 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="163.12"
                 height="23"
@@ -1093,7 +1557,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1113,11 +1577,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1125,9 +1590,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 132.52,0 l 0,23 l-132.52 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="132.52"
                 height="23"
@@ -1136,7 +1601,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1156,11 +1621,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1168,9 +1634,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 162.88,0 l 0,23 l-162.88 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="162.88"
                 height="23"
@@ -1179,7 +1645,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1199,11 +1665,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1211,9 +1678,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 127.72000000000003,0 l 0,23 l-127.72000000000003 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="127.72000000000003"
                 height="23"
@@ -1222,7 +1689,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1242,11 +1709,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1254,9 +1722,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 125.2,0 l 0,23 l-125.2 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="125.2"
                 height="23"
@@ -1265,7 +1733,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1281,11 +1749,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1293,9 +1762,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 51.64,0 l 0,23 l-51.64 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="51.64"
                 height="23"
@@ -1304,7 +1773,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1324,11 +1793,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1336,9 +1806,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 110.8,0 l 0,23 l-110.8 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="110.8"
                 height="23"
@@ -1347,7 +1817,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1367,11 +1837,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1379,9 +1850,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 94,0 l 0,23 l-94 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="94"
                 height="23"
@@ -1390,7 +1861,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1406,11 +1877,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1418,9 +1890,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 52.48000000000001,0 l 0,23 l-52.48000000000001 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="52.48000000000001"
                 height="23"
@@ -1429,7 +1901,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1445,11 +1917,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1457,9 +1930,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 48.4,0 l 0,23 l-48.4 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="48.4"
                 height="23"
@@ -1468,7 +1941,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1484,11 +1957,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1496,9 +1970,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 52.239999999999995,0 l 0,23 l-52.239999999999995 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="52.239999999999995"
                 height="23"
@@ -1507,7 +1981,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1523,11 +1997,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1535,9 +2010,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 57.040000000000006,0 l 0,23 l-57.040000000000006 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="57.040000000000006"
                 height="23"
@@ -1546,7 +2021,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1562,11 +2037,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1574,9 +2050,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 65.56,0 l 0,23 l-65.56 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="65.56"
                 height="23"
@@ -1585,7 +2061,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1605,11 +2081,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1617,9 +2094,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 147.15999999999994,0 l 0,23 l-147.15999999999994 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="147.15999999999994"
                 height="23"
@@ -1628,7 +2105,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1648,11 +2125,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1660,9 +2138,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 118.47999999999999,0 l 0,23 l-118.47999999999999 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="118.47999999999999"
                 height="23"
@@ -1671,7 +2149,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1691,11 +2169,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1703,9 +2182,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 230.67999999999995,0 l 0,23 l-230.67999999999995 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="230.67999999999995"
                 height="23"
@@ -1714,7 +2193,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1734,11 +2213,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1746,9 +2226,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 199.95999999999998,0 l 0,23 l-199.95999999999998 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="199.95999999999998"
                 height="23"
@@ -1757,7 +2237,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1777,11 +2257,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1789,9 +2270,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 152.31999999999996,0 l 0,23 l-152.31999999999996 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="152.31999999999996"
                 height="23"
@@ -1800,7 +2281,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-layout-d3-force.svg b/packages/g6/__tests__/integration/snapshots/static/controller-layout-d3-force.svg
index ee7001fb228..db633180904 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-layout-d3-force.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-layout-d3-force.svg
@@ -18,13 +18,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,285.386841,261.772034)">
             <path
               id="key"
               fill="none"
               d="M 46.299016970241155,11.406238600285633 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -35,13 +50,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="1"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,304.601837,220.592850)">
             <path
               id="key"
               fill="none"
               d="M 3.821068952211931,45.75080343577744 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -52,13 +82,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="2"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,284.606476,263.881836)">
             <path
               id="key"
               fill="none"
               d="M 15.719372582004667,7.925226239033918 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -69,13 +114,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="3"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,308.782654,219.280212)">
             <path
               id="key"
               fill="none"
               d="M 27.599784454648102,47.63745285388188 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -86,13 +146,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="4"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,280.669830,219.292023)">
             <path
               id="key"
               fill="none"
               d="M 0,31.423454332594815 L 18.106997721927996,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -103,13 +178,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="5"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,319.252563,275.800079)">
             <path
               id="key"
               fill="none"
               d="M 0,0.27911854248657164 L 12.145629508046909,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -120,13 +210,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="6"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,169.613129,287.432892)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 58.95058152341346,22.003560665718624"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -137,13 +242,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="7"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,202.189819,278.766693)">
             <path
               id="key"
               fill="none"
               d="M 0,29.775640729732345 L 16.02904868343765,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -154,13 +274,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="8"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,170.005096,272.136414)">
             <path
               id="key"
               fill="none"
               d="M 0,9.62464740607777 L 43.193242246121315,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -171,13 +306,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="9"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,207.390808,314.017303)">
             <path
               id="key"
               fill="none"
               d="M 20.60048064679063,0 L 0,2.2462550348648165"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -188,13 +338,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="10"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,226.249390,279.404633)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 8.39254558453564,24.08556875215436"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -205,13 +370,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="11"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,167.684692,290.617554)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 22.324828519012613,20.048419037849612"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -222,13 +402,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="12"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,186.499161,172.893478)">
             <path
               id="key"
               fill="none"
               d="M 0,19.463736297078697 L 48.19404892301702,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -239,13 +434,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="13"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,193.125473,144.087265)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 8.831299066594852,19.472447535925937"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -256,13 +466,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="14"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,184.989761,178.970535)">
             <path
               id="key"
               fill="none"
               d="M 0,10.827762767331478 L 13.334392283759371,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -273,13 +498,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="15"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,197.488144,140.259216)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 37.98443148933569,23.61041903978679"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -290,13 +530,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="16"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,216.044266,170.073547)">
             <path
               id="key"
               fill="none"
               d="M 17.964160896126486,0 L 0,1.6685076619401116"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -307,13 +562,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="17"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,179.117462,144.799759)">
             <path
               id="key"
               fill="none"
               d="M 0,41.4825706765136 L 7.987012607156828,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -324,13 +594,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="18"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,209.175552,196.165054)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 24.443826634727543,11.935421416699"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -341,13 +626,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="19"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,233.276840,192.281815)">
             <path
               id="key"
               fill="none"
               d="M 25.685237828720233,0 L 0,40.5290895002762"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -358,13 +658,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="20"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,232.469330,221.395355)">
             <path
               id="key"
               fill="none"
               d="M 5.5905236595721135,0 L 0,10.95494443546903"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -375,13 +690,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="21"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,210.113724,185.064346)">
             <path
               id="key"
               fill="none"
               d="M 0,5.483883494530858 L 44.277203505177056,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -392,13 +722,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="22"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,248.644470,191.805740)">
             <path
               id="key"
               fill="none"
               d="M 9.631526169165795,0 L 0,12.711896697465477"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -409,13 +754,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="23"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,205.078979,200.500519)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 17.95538547068122,32.03383107623216"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -426,13 +786,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="24"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,355.487396,238.349030)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 23.510701638205774,10.118607344026088"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -443,13 +818,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="25"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,325.816040,285.152618)">
             <path
               id="key"
               fill="none"
               d="M 25.194107472599853,0 L 0,8.88237780355837"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -460,13 +850,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="26"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,320.676636,243.428055)">
             <path
               id="key"
               fill="none"
               d="M 21.333726782660847,0 L 0,44.8996497762264"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -477,13 +882,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="27"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,367.303406,259.694794)">
             <path
               id="key"
               fill="none"
               d="M 14.017877671133874,0 L 0,14.858902528813815"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -494,13 +914,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="28"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,324.861542,257.726379)">
             <path
               id="key"
               fill="none"
               d="M 54.845432547156406,0 L 0,34.328081460729095"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -511,13 +946,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="29"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,349.158691,243.979050)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 8.425761374381068,28.26531108243566"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -528,13 +978,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="30"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,300.778778,261.312561)">
             <path
               id="key"
               fill="none"
               d="M 0,22.884490695263935 L 32.64074999721447,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -545,13 +1010,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="31"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,284.398529,228.651245)">
             <path
               id="key"
               fill="none"
               d="M 23.438634477213668,0 L 0,7.509784651759162"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -562,13 +1042,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="32"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,323.649841,233.374451)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 11.668242614864084,14.42299060873745"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -579,13 +1074,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="33"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,278.172485,248.653091)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 11.121096505942432,31.843805133424212"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -596,13 +1106,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="34"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,296.183563,234.932297)">
             <path
               id="key"
               fill="none"
               d="M 0,45.67314562466029 L 17.58386345159147,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -613,13 +1138,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="35"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,284.587799,241.593292)">
             <path
               id="key"
               fill="none"
               d="M 47.307407377664276,11.597554848675031 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -630,13 +1170,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="36"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,210.552277,264.530121)">
             <path
               id="key"
               fill="none"
               d="M 1.7965363123319094,55.795866502394574 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -647,13 +1202,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="37"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,161.796051,288.133148)">
             <path
               id="key"
               fill="none"
               d="M 0,20.27660579515259 L 12.840023161296472,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -664,13 +1234,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="38"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,162.979492,262.105927)">
             <path
               id="key"
               fill="none"
               d="M 0,47.18171449768715 L 40.71755002969502,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -681,13 +1266,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="39"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,185.409210,288.086365)">
             <path
               id="key"
               fill="none"
               d="M 21.83827140999972,33.8326943610391 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -698,13 +1298,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="40"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,187.675064,260.928986)">
             <path
               id="key"
               fill="none"
               d="M 0,12.361938306781099 L 14.866389896799149,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -715,13 +1330,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="41"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,166.171173,319.186890)">
             <path
               id="key"
               fill="none"
               d="M 36.77434257835819,8.805326132276036 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -732,13 +1362,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="42"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,197.618118,236.383347)">
             <path
               id="key"
               fill="none"
               d="M 2.390953877800314,0 L 0,50.179494592938426"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -749,13 +1394,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="43"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,173.859390,250.665756)">
             <path
               id="key"
               fill="none"
               d="M 57.58347714985695,9.675505258484577 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -766,13 +1426,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="44"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,169.716568,257.212006)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 21.70668065122203,31.136225230346213"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -783,13 +1458,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="45"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,208.021164,232.967850)">
             <path
               id="key"
               fill="none"
               d="M 25.7473168852531,22.457278324935658 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -800,13 +1490,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="46"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,205.017990,268.160400)">
             <path
               id="key"
               fill="none"
               d="M 0,22.228979906481186 L 28.41084068516176,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -817,13 +1522,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="47"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,172.497513,231.662704)">
             <path
               id="key"
               fill="none"
               d="M 0,12.077987708413616 L 19.48763057656157,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -834,13 +1554,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="48"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,231.019531,216.545914)">
             <path
               id="key"
               fill="none"
               d="M 0,47.49721684412472 L 64.68941062009063,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -851,13 +1586,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="49"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,242.919067,179.143799)">
             <path
               id="key"
               fill="none"
               d="M 0,23.34927454247952 L 0.732812083565193,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -868,13 +1618,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="50"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,205.484253,265.333649)">
             <path
               id="key"
               fill="none"
               d="M 0,46.060206972013475 L 62.15837154706003,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -885,13 +1650,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="51"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,209.120728,182.195633)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 15.769485717517512,49.533116626578135"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -902,13 +1682,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="52"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,321.552490,264.133240)">
             <path
               id="key"
               fill="none"
               d="M 14.887605301992721,0 L 0,24.665383510210177"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -919,13 +1714,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="53"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,200.116272,264.082794)">
             <path
               id="key"
               fill="none"
               d="M 0,22.921220481907312 L 7.140079944079048,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -936,13 +1746,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="54"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,283.826660,243.670380)">
             <path
               id="key"
               fill="none"
               d="M 67.66325375391591,33.69915138584861 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -953,13 +1778,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="55"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,183.576279,235.727966)">
             <path
               id="key"
               fill="none"
               d="M 13.318514068137858,0 L 0,34.62333825585233"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -970,13 +1810,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="56"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,252.182602,174.847885)">
             <path
               id="key"
               fill="none"
               d="M 43.36990199339846,30.080492010630053 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -987,13 +1842,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="57"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,219.504242,258.276520)">
             <path
               id="key"
               fill="none"
               d="M 87.60696545486815,35.34225401523929 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1004,13 +1874,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="58"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,237.273193,244.805603)">
             <path
               id="key"
               fill="none"
               d="M 29.05457299977013,11.02623683363555 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1021,13 +1906,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="59"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,189.184311,243.135529)">
             <path
               id="key"
               fill="none"
               d="M 76.4928154377219,0 L 0,32.62582295805734"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1038,13 +1938,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="60"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,213.904938,178.449173)">
             <path
               id="key"
               fill="none"
               d="M 0,66.78568703540225 L 26.386157058644187,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1055,13 +1970,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="61"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,187.788635,247.512085)">
             <path
               id="key"
               fill="none"
               d="M 0,25.917937139470183 L 32.33259977186697,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1072,13 +2002,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="62"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,187.675064,260.928986)">
             <path
               id="key"
               fill="none"
               d="M 0,12.361938306781099 L 14.866389896799149,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1089,13 +2034,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="63"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,230.095383,178.910095)">
             <path
               id="key"
               fill="none"
               d="M 0,52.5860477212176 L 11.698616060477661,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1109,11 +2069,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1126,11 +2087,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1143,11 +2105,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1160,11 +2123,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1177,11 +2141,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1194,11 +2159,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1211,11 +2177,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1228,11 +2195,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1245,11 +2213,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1262,11 +2231,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1279,11 +2249,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1296,11 +2267,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1313,11 +2285,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1330,11 +2303,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1347,11 +2321,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1364,11 +2339,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1381,11 +2357,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1398,11 +2375,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1415,11 +2393,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1432,11 +2411,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1449,11 +2429,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1466,11 +2447,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1483,11 +2465,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1500,11 +2483,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1517,11 +2501,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1534,11 +2519,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1551,11 +2537,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1568,11 +2555,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1585,11 +2573,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1602,11 +2591,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1619,11 +2609,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1636,11 +2627,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-layout-dagre.svg b/packages/g6/__tests__/integration/snapshots/static/controller-layout-dagre.svg
index 564e5d0f00d..07429d34a8e 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-layout-dagre.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-layout-dagre.svg
@@ -18,13 +18,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-1"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,145,21.961161)">
             <path
               id="key"
               fill="none"
               d="M 115.19419324309081,0 L 0,23.038838648618157 L 0,38.03883864861815"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -35,13 +50,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-2"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,279.893585,21.454941)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 160.1064086463515,23.545060095051678 L 160.1064086463515,48.54506009505168 L 160.1064086463515,73.54506009505168 L 160.1064086463515,98.54506009505168 L 160.1064086463515,123.54506009505168 L 160.1064086463515,148.54506009505167 L 160.1064086463515,173.54506009505167 L 160.1064086463515,188.54506009505167"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -52,13 +82,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="1-4"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,145,80)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 0,15 L 26.862665287932657,34.18761806280904"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -69,13 +114,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-3"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,279.417419,23.363363)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 60.58258088405165,21.636636030018437 L 60.58258088405165,36.63663603001844"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -86,13 +146,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="3-4"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,189.771759,74.856430)">
             <path
               id="key"
               fill="none"
               d="M 141.48666359955664,0 L 105.228236360772,20.143570688213686 L 0,43.019274244903244"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -103,13 +178,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="4-5"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,100,122.982750)">
             <path
               id="key"
               fill="none"
               d="M 70.4552002196497,0 L 0,22.017250068640536 L 0,37.017250068640536"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -120,13 +210,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="4-6"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,189.544800,122.982750)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 70.4552002196497,22.017250068640536 L 70.4552002196497,37.017250068640536"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -137,13 +242,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="5-7"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,109.544800,172.982742)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 70.4552002196497,22.01725006864052 L 70.4552002196497,37.01725006864052"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -154,13 +274,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="5-8"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,20,172.982742)">
             <path
               id="key"
               fill="none"
               d="M 70.4552002196497,0 L 0,22.01725006864052 L 0,37.01725006864052"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -171,13 +306,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="8-9"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,20,230)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 0,15 L 320.0285731197205,39.24458887270612"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -188,13 +338,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="2-9"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,359.635193,230)">
             <path
               id="key"
               fill="none"
               d="M 80.3648209037006,0 L 80.3648209037006,15 L 0,37.32356136213906"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -205,13 +370,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="3-9"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,343.713898,79.284767)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 6.286093236458953,15.715233091147411 L 6.286093236458953,40.71523309114741 L 6.286093236458953,65.71523309114741 L 6.286093236458953,90.71523309114741 L 6.286093236458953,115.71523309114741 L 6.286093236458953,140.7152330911474 L 6.286093236458953,165.7152330911474 L 6.286093236458953,180.7152330911474"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -221,11 +401,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -234,11 +415,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -247,11 +429,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -260,11 +443,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -273,11 +457,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -286,11 +471,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -299,11 +485,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -312,11 +499,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -325,11 +513,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -338,11 +527,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-layout-dendrogram.svg b/packages/g6/__tests__/integration/snapshots/static/controller-layout-dendrogram.svg
index b02c5f805d8..818107a4142 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-layout-dendrogram.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-layout-dendrogram.svg
@@ -18,13 +18,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Modeling Methods-Classification"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,-9.692300,-383.433838)">
             <path
               id="key"
               fill="none"
               d="M 0,323.8676822951891 C 241.69230022029035 323.8676822951891,241.69230022029032 5.684341886080802e-14,483.3846004405807 5.684341886080802e-14"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -35,13 +50,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Modeling Methods-Consensus"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,-8.225422,-51.888691)">
             <path
               id="key"
               fill="none"
               d="M 0,0 C 115.22542200634012 0,115.22542200634014 49.777382306738936,230.45084401268025 49.777382306738936"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -52,13 +82,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Modeling Methods-Regression"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,-9.692300,-48.433842)">
             <path
               id="key"
               fill="none"
               d="M 0,0 C 241.69230022029035 0,241.69230022029032 323.86768229518907,483.3846004405807 323.86768229518907"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -69,13 +114,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Classification-Logistic regression"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,490.929932,-510.499298)">
             <path
               id="key"
               fill="none"
               d="M 0,116.9986221326244 C 116.07006163950837 116.9986221326244,116.07006163950837 0,232.14012327901673 0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -86,13 +146,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Classification-Linear discriminant analysis"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,491.408875,-475.612793)">
             <path
               id="key"
               fill="none"
               d="M 0,83.22561063454526 C 115.59112588131273 83.22561063454526,115.59112588131273 5.684341886080802e-14,231.1822517626254 5.684341886080802e-14"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -103,13 +178,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Classification-Rules"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,491.774567,-440.888702)">
             <path
               id="key"
               fill="none"
               d="M 0,49.77738230673896 C 115.22542200634012 49.77738230673896,115.22542200634012 5.684341886080802e-14,230.4508440126803 5.684341886080802e-14"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -120,13 +210,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Classification-Decision trees"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,491.974182,-406.281860)">
             <path
               id="key"
               fill="none"
               d="M 0,16.563718030526047 C 115.02581965643088 16.563718030526047,115.02581965643088 0,230.0516393128617 0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -137,13 +242,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Classification-Naive Bayes"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,491.974182,-388.281860)">
             <path
               id="key"
               fill="none"
               d="M 0,0 C 115.02581965643088 0,115.02581965643088 16.563718030526047,230.0516393128617 16.563718030526047"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -154,13 +274,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Classification-K nearest neighbor"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,491.774567,-386.888702)">
             <path
               id="key"
               fill="none"
               d="M 0,0 C 115.22542200634012 0,115.22542200634012 49.7773823067389,230.4508440126803 49.7773823067389"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -171,13 +306,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Classification-Probabilistic neural network"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,491.408875,-385.612793)">
             <path
               id="key"
               fill="none"
               d="M 0,0 C 115.59112588131273 0,115.59112588131273 83.2256106345452,231.1822517626254 83.2256106345452"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -188,13 +338,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Classification-Support vector machine"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,490.929932,-384.499298)">
             <path
               id="key"
               fill="none"
               d="M 0,0 C 116.07006163950837 0,116.07006163950837 116.9986221326244,232.14012327901673 116.9986221326244"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -205,13 +370,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Consensus-Models diversity"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,240.915558,-122.470894)">
             <path
               id="key"
               fill="none"
               d="M 0,117.94179092696967 C 116.08443988874967 117.94179092696967,116.08443988874967 0,232.16887977749934 0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -222,13 +402,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Consensus-Methods"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,241.942184,1.073756)">
             <path
               id="key"
               fill="none"
               d="M 0,0 C 115.05781472553656 0,115.05781472553656 24.852487980715892,230.11562945107312 24.852487980715892"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -239,13 +434,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Consensus-Common"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,240.915558,4.529105)">
             <path
               id="key"
               fill="none"
               d="M 0,0 C 116.08443988874967 0,116.08443988874967 117.94179092696967,232.16887977749934 117.94179092696967"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -256,13 +466,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Models diversity-Different initializations"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,491.408875,-213.612808)">
             <path
               id="key"
               fill="none"
               d="M 0,83.22561063454515 C 115.59112588131273 83.22561063454515,115.59112588131273 0,231.1822517626254 0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -273,13 +498,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Models diversity-Different parameter choices"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,491.774567,-178.888687)">
             <path
               id="key"
               fill="none"
               d="M 0,49.77738230673896 C 115.22542200634012 49.77738230673896,115.22542200634012 0,230.4508440126803 0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -290,13 +530,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Models diversity-Different architectures"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,491.974182,-144.281860)">
             <path
               id="key"
               fill="none"
               d="M 0,16.563718030526076 C 115.02581965643088 16.563718030526076,115.02581965643088 2.842170943040401e-14,230.0516393128617 2.842170943040401e-14"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -307,13 +562,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Models diversity-Different modeling methods"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,491.974182,-126.281860)">
             <path
               id="key"
               fill="none"
               d="M 0,0 C 115.02581965643088 0,115.02581965643088 16.563718030526047,230.0516393128617 16.563718030526047"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -324,13 +594,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Models diversity-Different training sets"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,491.774567,-124.888695)">
             <path
               id="key"
               fill="none"
               d="M 0,0 C 115.22542200634012 0,115.22542200634012 49.77738230673893,230.4508440126803 49.77738230673893"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -341,13 +626,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Models diversity-Different feature sets"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,491.408875,-123.612808)">
             <path
               id="key"
               fill="none"
               d="M 0,0 C 115.59112588131273 0,115.59112588131273 83.22561063454518,231.1822517626254 83.22561063454518"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -358,13 +658,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Methods-Classifier selection"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,491.974182,9.718141)">
             <path
               id="key"
               fill="none"
               d="M 0,16.563718030526054 C 115.02581965643088 16.563718030526054,115.02581965643088 0,230.0516393128617 0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -375,13 +690,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Methods-Classifier fusion"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,491.974182,27.718142)">
             <path
               id="key"
               fill="none"
               d="M 0,0 C 115.02581965643088 0,115.02581965643088 16.563718030526058,230.0516393128617 16.563718030526058"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -392,13 +722,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Common-Bagging"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,491.897919,92.425301)">
             <path
               id="key"
               fill="none"
               d="M 0,33.14940334132889 C 115.1020949351697 33.14940334132889,115.1020949351697 1.4210854715202004e-14,230.2041898703394 1.4210854715202004e-14"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -409,13 +754,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Common-Boosting"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,492,127)">
             <path
               id="key"
               fill="none"
               d="M 0,0 C 115 0,115 0,230 0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -426,13 +786,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Common-AdaBoost"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,491.897919,128.425293)">
             <path
               id="key"
               fill="none"
               d="M 0,0 C 115.1020949351697 0,115.1020949351697 33.14940334132888,230.2041898703394 33.14940334132888"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -443,13 +818,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Regression-Multiple linear regression"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,491.609406,211.767517)">
             <path
               id="key"
               fill="none"
               d="M 0,66.46497631393979 C 115.39058387836764 66.46497631393979,115.39058387836764 0,230.78116775673521 0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -460,13 +850,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Regression-Partial least squares"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,491.897919,246.425293)">
             <path
               id="key"
               fill="none"
               d="M 0,33.149403341328934 C 115.1020949351697 33.149403341328934,115.1020949351697 2.842170943040401e-14,230.2041898703394 2.842170943040401e-14"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -477,13 +882,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Regression-Multi-layer feed forward neural network"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,492,281)">
             <path
               id="key"
               fill="none"
               d="M 0,0 C 115 0,115 0,230 0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -494,13 +914,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Regression-General regression neural network"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,491.897919,282.425293)">
             <path
               id="key"
               fill="none"
               d="M 0,0 C 115.1020949351697 0,115.1020949351697 33.149403341328934,230.2041898703394 33.149403341328934"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -511,13 +946,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Regression-Support vector regression"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,491.609406,283.767517)">
             <path
               id="key"
               fill="none"
               d="M 0,0 C 115.39058387836764 0,115.39058387836764 66.46497631393981,230.78116775673521 66.46497631393981"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 C 0 0,0 0,0 0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -531,11 +981,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -543,9 +994,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 108.4,0 l 0,23 l-108.4 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="108.4"
                 height="23"
@@ -554,7 +1005,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -570,11 +1021,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -582,9 +1034,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 78.88,0 l 0,23 l-78.88 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="78.88"
                 height="23"
@@ -593,7 +1045,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -613,11 +1065,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -625,9 +1078,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 111.40000000000002,0 l 0,23 l-111.40000000000002 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="111.40000000000002"
                 height="23"
@@ -636,7 +1089,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -656,11 +1109,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -668,9 +1122,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 161.20000000000002,0 l 0,23 l-161.20000000000002 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="161.20000000000002"
                 height="23"
@@ -679,7 +1133,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -695,11 +1149,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -707,9 +1162,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 32.8,0 l 0,23 l-32.8 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="32.8"
                 height="23"
@@ -718,7 +1173,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -734,11 +1189,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -746,9 +1202,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 83.92,0 l 0,23 l-83.92 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="83.92"
                 height="23"
@@ -757,7 +1213,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -773,11 +1229,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -785,9 +1242,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 71.67999999999999,0 l 0,23 l-71.67999999999999 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="71.67999999999999"
                 height="23"
@@ -796,7 +1253,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -816,11 +1273,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -828,9 +1286,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 110.91999999999999,0 l 0,23 l-110.91999999999999 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="110.91999999999999"
                 height="23"
@@ -839,7 +1297,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -859,11 +1317,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -871,9 +1330,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 162.4,0 l 0,23 l-162.4 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="162.4"
                 height="23"
@@ -882,7 +1341,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -902,11 +1361,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -914,9 +1374,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 139.72000000000003,0 l 0,23 l-139.72000000000003 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="139.72000000000003"
                 height="23"
@@ -925,7 +1385,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -941,11 +1401,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -953,9 +1414,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 64.96000000000001,0 l 0,23 l-64.96000000000001 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="64.96000000000001"
                 height="23"
@@ -964,7 +1425,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -984,11 +1445,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -996,9 +1458,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 96.16000000000001,0 l 0,23 l-96.16000000000001 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="96.16000000000001"
                 height="23"
@@ -1007,7 +1469,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1027,11 +1489,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1039,9 +1502,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 131.68000000000004,0 l 0,23 l-131.68000000000004 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="131.68000000000004"
                 height="23"
@@ -1050,7 +1513,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1070,11 +1533,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1082,9 +1546,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 163.12,0 l 0,23 l-163.12 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="163.12"
                 height="23"
@@ -1093,7 +1557,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1113,11 +1577,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1125,9 +1590,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 132.52,0 l 0,23 l-132.52 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="132.52"
                 height="23"
@@ -1136,7 +1601,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1156,11 +1621,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1168,9 +1634,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 162.88,0 l 0,23 l-162.88 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="162.88"
                 height="23"
@@ -1179,7 +1645,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1199,11 +1665,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1211,9 +1678,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 127.72000000000003,0 l 0,23 l-127.72000000000003 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="127.72000000000003"
                 height="23"
@@ -1222,7 +1689,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1242,11 +1709,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1254,9 +1722,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 125.2,0 l 0,23 l-125.2 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="125.2"
                 height="23"
@@ -1265,7 +1733,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1281,11 +1749,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1293,9 +1762,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 51.64,0 l 0,23 l-51.64 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="51.64"
                 height="23"
@@ -1304,7 +1773,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1324,11 +1793,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1336,9 +1806,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 110.8,0 l 0,23 l-110.8 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="110.8"
                 height="23"
@@ -1347,7 +1817,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1367,11 +1837,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1379,9 +1850,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 94,0 l 0,23 l-94 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="94"
                 height="23"
@@ -1390,7 +1861,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1406,11 +1877,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1418,9 +1890,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 52.48000000000001,0 l 0,23 l-52.48000000000001 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="52.48000000000001"
                 height="23"
@@ -1429,7 +1901,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1445,11 +1917,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1457,9 +1930,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 48.4,0 l 0,23 l-48.4 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="48.4"
                 height="23"
@@ -1468,7 +1941,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1484,11 +1957,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1496,9 +1970,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 52.239999999999995,0 l 0,23 l-52.239999999999995 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="52.239999999999995"
                 height="23"
@@ -1507,7 +1981,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1523,11 +1997,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1535,9 +2010,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 57.040000000000006,0 l 0,23 l-57.040000000000006 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="57.040000000000006"
                 height="23"
@@ -1546,7 +2021,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1562,11 +2037,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1574,9 +2050,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 65.56,0 l 0,23 l-65.56 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="65.56"
                 height="23"
@@ -1585,7 +2061,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1605,11 +2081,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1617,9 +2094,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 147.15999999999994,0 l 0,23 l-147.15999999999994 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="147.15999999999994"
                 height="23"
@@ -1628,7 +2105,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1648,11 +2125,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1660,9 +2138,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 118.47999999999999,0 l 0,23 l-118.47999999999999 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="118.47999999999999"
                 height="23"
@@ -1671,7 +2149,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1691,11 +2169,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1703,9 +2182,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 195.15999999999997,0 l 0,23 l-195.15999999999997 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="195.15999999999997"
                 height="23"
@@ -1714,7 +2193,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1734,11 +2213,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1746,9 +2226,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 199.95999999999998,0 l 0,23 l-199.95999999999998 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="199.95999999999998"
                 height="23"
@@ -1757,7 +2237,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -1777,11 +2257,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1789,9 +2270,9 @@
             <g transform="matrix(1,0,0,1,0,-11.500000)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 152.31999999999996,0 l 0,23 l-152.31999999999996 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="152.31999999999996"
                 height="23"
@@ -1800,7 +2281,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-layout-grid.svg b/packages/g6/__tests__/integration/snapshots/static/controller-layout-grid.svg
index d6eebd801c8..970885a0356 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-layout-grid.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-layout-grid.svg
@@ -18,13 +18,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,377.425354,51.368092)">
             <path
               id="key"
               fill="none"
               d="M 0,313.9304822025391 L 78.48263043042027,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -35,13 +50,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="1"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,46.138805,133.944275)">
             <path
               id="key"
               fill="none"
               d="M 0,148.77811283791684 L 74.38905982421937,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -52,13 +82,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="2"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,50.241596,46.811626)">
             <path
               id="key"
               fill="none"
               d="M 0,239.7100739553365 L 399.5168167485888,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -69,13 +114,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="3"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,132.071075,132.071075)">
             <path
               id="key"
               fill="none"
               d="M 235.85786437626905,235.85786437626905 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -86,13 +146,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="4"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,134.701431,44.092026)">
             <path
               id="key"
               fill="none"
               d="M 313.9304934507062,0 L 0,78.48261977002727"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -103,13 +178,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="5"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,51.368092,294.092010)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 313.9304822025391,78.48263043042027"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -120,13 +210,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="6"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,301.666656,291.666656)">
             <path
               id="key"
               fill="none"
               d="M 146.66668701171875,0 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -137,13 +242,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="7"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,135,208.333328)">
             <path
               id="key"
               fill="none"
               d="M 63.33332824707031,0 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -154,13 +274,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="8"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,134.701431,210.758682)">
             <path
               id="key"
               fill="none"
               d="M 313.9304933984596,78.48261616431637 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -171,13 +306,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="9"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,215.404404,215.404404)">
             <path
               id="key"
               fill="none"
               d="M 69.19119262333936,69.19119262333936 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -188,13 +338,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="10"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,133.944275,212.805466)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 148.77811267414233,74.38905633707114"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -205,13 +370,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="11"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,217.820160,211.495605)">
             <path
               id="key"
               fill="none"
               d="M 231.02634906616666,77.00877362156993 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -222,13 +402,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="12"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,296.138794,50.610939)">
             <path
               id="key"
               fill="none"
               d="M 74.38907044943869,148.7781170620504 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -239,13 +434,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="13"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,213.880325,133.320496)">
             <path
               id="key"
               fill="none"
               d="M 0,233.35899426950255 L 155.57266759403592,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -256,13 +466,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="14"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,375,135)">
             <path
               id="key"
               fill="none"
               d="M 0,63.33332824707031 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -273,13 +498,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="15"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,210.758682,51.368092)">
             <path
               id="key"
               fill="none"
               d="M 0,313.9304819935527 L 78.48261600757658,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -290,13 +530,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="16"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,298.737732,48.737736)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 69.19120691106514,69.1911974091"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -307,13 +562,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="17"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,215.404404,215.404404)">
             <path
               id="key"
               fill="none"
               d="M 152.52453612919874,0 L 0,152.52453612919874"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -324,13 +594,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="18"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,208.333328,135)">
             <path
               id="key"
               fill="none"
               d="M 0,146.66665649414062 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -341,13 +626,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="19"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,44.092026,51.368092)">
             <path
               id="key"
               fill="none"
               d="M 0,313.9304820457993 L 78.48261961328751,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -358,13 +658,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="20"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,132.071060,48.737736)">
             <path
               id="key"
               fill="none"
               d="M 69.19119294702716,69.19119611434883 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -375,13 +690,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="21"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,50.610939,296.138794)">
             <path
               id="key"
               fill="none"
               d="M 148.7781170620504,0 L 0,74.38907044943869"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -392,13 +722,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="22"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,47.213669,133.320496)">
             <path
               id="key"
               fill="none"
               d="M 0,233.35899391791884 L 155.5726566773198,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -409,13 +754,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="23"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,128.162277,51.153500)">
             <path
               id="key"
               fill="none"
               d="M 77.0087730135881,231.02632256594643 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -426,13 +786,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="24"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,50.241596,213.478287)">
             <path
               id="key"
               fill="none"
               d="M 399.5168172334777,0 L 0,239.71009985006924"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -443,13 +818,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="25"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,296.138794,50.610939)">
             <path
               id="key"
               fill="none"
               d="M 0,148.7781170620504 L 74.38907044943869,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -460,13 +850,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="26"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,379.472137,50.610939)">
             <path
               id="key"
               fill="none"
               d="M 74.38907044943869,148.7781170620504 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -477,13 +882,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="27"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,48.737736,215.404404)">
             <path
               id="key"
               fill="none"
               d="M 0,235.85787887978663 L 235.85785368744882,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -494,13 +914,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="28"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,47.913620,49.475357)">
             <path
               id="key"
               fill="none"
               d="M 0,401.0492992253229 L 320.8394313024834,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -511,13 +946,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="29"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,301.666656,208.333328)">
             <path
               id="key"
               fill="none"
               d="M 146.66668701171875,0 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -528,13 +978,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="30"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,48.737736,215.404388)">
             <path
               id="key"
               fill="none"
               d="M 69.19119611434883,69.19119294702716 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -545,13 +1010,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="31"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,50.610939,129.472137)">
             <path
               id="key"
               fill="none"
               d="M 315.4447880370511,157.72238499357775 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -562,13 +1042,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="32"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,51.368092,210.758682)">
             <path
               id="key"
               fill="none"
               d="M 313.9304819935527,78.48261600757658 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -579,13 +1074,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="33"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,46.138805,133.944275)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 74.38905982421937,148.77811283791684"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -596,13 +1106,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="34"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,135,291.666656)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 230,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -613,13 +1138,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="35"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,41.666668,135)">
             <path
               id="key"
               fill="none"
               d="M 0,63.33332824707031 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -630,13 +1170,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="36"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,44.092026,51.368092)">
             <path
               id="key"
               fill="none"
               d="M 78.48261961328751,313.9304820457993 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -647,13 +1202,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="37"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,126.961159,51.472473)">
             <path
               id="key"
               fill="none"
               d="M 0,397.05506199165677 L 79.4110058550657,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -664,13 +1234,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="38"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,43.627831,51.472473)">
             <path
               id="key"
               fill="none"
               d="M 79.41100949711904,397.0550620261855 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -681,13 +1266,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="39"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,127.425354,51.368092)">
             <path
               id="key"
               fill="none"
               d="M 0,313.9304819935527 L 78.48261600757661,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -698,13 +1298,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="40"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,51.666668,41.666668)">
             <path
               id="key"
               fill="none"
               d="M 146.6666603088379,0 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -715,13 +1330,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="41"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,125,385)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 0,63.333343505859375"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -732,13 +1362,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="42"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,301.666656,125)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 146.66668701171875,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -749,13 +1394,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="43"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,301.666656,375)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 146.66668701171875,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -766,13 +1426,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="44"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,458.333344,135)">
             <path
               id="key"
               fill="none"
               d="M 0,230 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -783,13 +1458,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="45"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,291.666656,135)">
             <path
               id="key"
               fill="none"
               d="M 0,230 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -800,13 +1490,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="46"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,297.213654,133.320496)">
             <path
               id="key"
               fill="none"
               d="M 155.57268214965757,0 L 0,233.3589947382809"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -817,13 +1522,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="47"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,297.213654,133.320496)">
             <path
               id="key"
               fill="none"
               d="M 155.57268214965757,233.3589947382809 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -834,13 +1554,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="48"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,125,135)">
             <path
               id="key"
               fill="none"
               d="M 0,63.33332824707031 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -851,13 +1586,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="49"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,215.404388,48.737736)">
             <path
               id="key"
               fill="none"
               d="M 0,69.19119611434883 L 69.19119294702716,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -868,13 +1618,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="50"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,216.653824,47.213669)">
             <path
               id="key"
               fill="none"
               d="M 0,155.5726571460981 L 233.35900886418904,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -885,13 +1650,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="51"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,134.486832,44.828945)">
             <path
               id="key"
               fill="none"
               d="M 231.02633401003823,77.00877682828536 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -902,13 +1682,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="52"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,50.610939,46.138805)">
             <path
               id="key"
               fill="none"
               d="M 0,157.72238864450048 L 315.4447881189384,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -919,13 +1714,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="53"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,51.472473,43.627831)">
             <path
               id="key"
               fill="none"
               d="M 397.0550620261855,79.41100949711904 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -936,13 +1746,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="54"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,51.153500,128.162277)">
             <path
               id="key"
               fill="none"
               d="M 231.02632256594643,77.0087730135881 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -953,13 +1778,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="55"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,215.404388,48.737736)">
             <path
               id="key"
               fill="none"
               d="M 69.19119294702716,69.19119611434883 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -970,13 +1810,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="56"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,133.944275,46.138805)">
             <path
               id="key"
               fill="none"
               d="M 0,74.38905982421937 L 148.77811283791684,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -987,13 +1842,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="57"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,51.666668,41.666668)">
             <path
               id="key"
               fill="none"
               d="M 313.3333320617676,0 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1004,13 +1874,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="58"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,135,41.666668)">
             <path
               id="key"
               fill="none"
               d="M 313.3333435058594,0 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1021,13 +1906,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="59"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,50.610939,46.138805)">
             <path
               id="key"
               fill="none"
               d="M 0,74.3890599879939 L 148.7781165707268,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1038,13 +1938,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="60"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,51.666668,41.666668)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 229.9999885559082,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1055,13 +1970,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="61"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,135,41.666668)">
             <path
               id="key"
               fill="none"
               d="M 63.33332824707031,0 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1072,13 +2002,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="62"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,51.666668,41.666668)">
             <path
               id="key"
               fill="none"
               d="M 146.6666603088379,0 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1089,13 +2034,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="63"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,135,41.666668)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 146.66665649414062,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1109,11 +2069,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1126,11 +2087,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1143,11 +2105,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1156,11 +2119,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1169,11 +2133,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1186,11 +2151,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1199,11 +2165,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1212,11 +2179,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1229,11 +2197,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1246,11 +2215,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1263,11 +2233,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1276,11 +2247,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1293,11 +2265,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1310,11 +2283,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1323,11 +2297,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1340,11 +2315,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1357,11 +2333,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1374,11 +2351,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1387,11 +2365,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1400,11 +2379,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1413,11 +2393,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1426,11 +2407,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1439,11 +2421,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1456,11 +2439,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1469,11 +2453,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1482,11 +2467,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1499,11 +2485,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1516,11 +2503,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1529,11 +2517,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1546,11 +2535,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1559,11 +2549,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1572,11 +2563,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-layout-indented.svg b/packages/g6/__tests__/integration/snapshots/static/controller-layout-indented.svg
index 69c66c9dbf2..18e4bf53a6b 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-layout-indented.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-layout-indented.svg
@@ -18,13 +18,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="src-animations"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,4.997224,8.661856)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 20.005550930208457,34.676288279028"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -35,13 +50,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="src-behaviors"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,2.771606,9.608236)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 24.45678697395638,84.7835281763821"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -52,13 +82,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="src-elements"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,1.888474,9.820065)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 26.22305212699751,136.35987106038704"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -69,13 +114,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="src-layouts"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,0.821391,9.966208)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 28.357218335824932,344.0675824746759"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -86,13 +146,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="src-runtime"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,0.719286,9.974098)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 28.561428195654646,396.0518043130778"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -103,13 +178,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="src-spec"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,0.384331,9.992612)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 29.231337557975912,760.0147765073737"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -120,13 +210,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="src-themes"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,0.360343,9.993505)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 29.279314503872634,812.012988907401"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -137,13 +242,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="elements-nodes"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,34.997223,164.661850)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 20.005550930208457,34.67628827902797"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -154,13 +274,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="elements-edges"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,32.771606,165.608231)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 24.456786973956383,84.7835281763821"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -171,13 +306,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="elements-combos"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,31.888474,165.820068)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 26.223052126997516,136.35987106038704"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -188,13 +338,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="runtime-canvas"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,34.997223,424.661865)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 20.005550930208457,34.67628827902797"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -205,13 +370,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="runtime-data"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,32.771606,425.608246)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 24.456786973956383,84.7835281763821"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -222,13 +402,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="runtime-element"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,31.888474,425.820068)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 26.223052126997516,136.3598710603871"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -239,13 +434,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="runtime-graph"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,31.427536,425.897583)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 27.14492809926381,188.20483482156243"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -256,13 +466,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="runtime-layout"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,31.146240,425.934082)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 27.70751784029739,240.1318212825774"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -273,13 +498,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="runtime-viewport"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,30.957125,425.954102)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 28.085751867114848,292.09181941799443"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -290,13 +530,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="themes-dark"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,34.997223,840.661865)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 20.005550930208457,34.676288279028086"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -307,13 +562,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="themes-light"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,32.771606,841.608215)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 24.456786973956383,84.7835281763821"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -323,11 +593,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -336,11 +607,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -349,11 +621,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -362,11 +635,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -375,11 +649,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -388,11 +663,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -401,11 +677,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -414,11 +691,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -427,11 +705,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -440,11 +719,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -453,11 +733,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -466,11 +747,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -479,11 +761,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -492,11 +775,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -505,11 +789,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -518,11 +803,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -531,11 +817,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -544,11 +831,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -557,11 +845,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-layout-mindmap.svg b/packages/g6/__tests__/integration/snapshots/static/controller-layout-mindmap.svg
index bb4d84491c4..83bf12efa37 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-layout-mindmap.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-layout-mindmap.svg
@@ -18,13 +18,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Modeling Methods-Classification"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,-200.396271,-206.005142)">
             <path
               id="key"
               fill="none"
               d="M 0,171.5102829975297 L 200.79252643613233,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -35,13 +50,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Modeling Methods-Consensus"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,-200.396271,-21.505142)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 200.79252643613233,171.5102829975297"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -52,13 +82,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Modeling Methods-Regression"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,-414,-28)">
             <path
               id="key"
               fill="none"
               d="M 196,0 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -69,13 +114,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Classification-Logistic regression"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,16.637789,-333.461304)">
             <path
               id="key"
               fill="none"
               d="M 0,115.92257948951828 L 198.72442198203134,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -86,13 +146,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Classification-Linear discriminant analysis"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,17.230770,-298.653839)">
             <path
               id="key"
               fill="none"
               d="M 0,82.30769230769229 L 197.53846153846155,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -103,13 +178,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Classification-Rules"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,17.701426,-264.074646)">
             <path
               id="key"
               fill="none"
               d="M 0,49.14928749927333 L 196.59714999709337,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -120,13 +210,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Classification-Decision trees"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,17.965458,-229.669540)">
             <path
               id="key"
               fill="none"
               d="M 0,16.339090402925194 L 196.0690848351024,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -137,13 +242,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Classification-Naive Bayes"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,17.965458,-211.669540)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 196.0690848351024,16.339090402925194"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -154,13 +274,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Classification-K nearest neighbor"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,17.701426,-210.074646)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 196.59714999709337,49.14928749927333"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -171,13 +306,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Classification-Probabilistic neural network"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,17.230770,-208.653839)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 197.53846153846155,82.30769230769232"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -188,13 +338,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Classification-Support vector machine"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,16.637789,-207.461288)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 198.72442198203134,115.92257948951828"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -205,13 +370,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Consensus-Models diversity"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,16.792919,44.262833)">
             <path
               id="key"
               fill="none"
               d="M 0,107.47433702918494 L 198.4141606692645,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -222,13 +402,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Consensus-Methods"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,17.922779,157.740341)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 196.15444246572667,24.51930530821585"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -239,13 +434,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Consensus-Common"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,16.792919,161.262833)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 198.4141606692645,107.47433702918497"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -256,13 +466,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Models diversity-Different initializations"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,233.230774,-46.653847)">
             <path
               id="key"
               fill="none"
               d="M 0,82.3076923076923 L 197.53846153846155,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -273,13 +498,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Models diversity-Different parameter choices"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,233.701431,-12.074644)">
             <path
               id="key"
               fill="none"
               d="M 0,49.14928749927334 L 196.59714999709334,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -290,13 +530,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Models diversity-Different architectures"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,233.965454,22.330454)">
             <path
               id="key"
               fill="none"
               d="M 0,16.339090402925184 L 196.06908483510242,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -307,13 +562,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Models diversity-Different modeling methods"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,233.965454,40.330456)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 196.06908483510242,16.339090402925187"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -324,13 +594,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Models diversity-Different training sets"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,233.701431,41.925358)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 196.59714999709334,49.149287499273335"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -341,13 +626,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Models diversity-Different feature sets"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,233.230774,43.346153)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 197.53846153846155,82.30769230769232"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -358,13 +658,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Methods-Classifier selection"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,233.965454,166.330460)">
             <path
               id="key"
               fill="none"
               d="M 0,16.339090402925194 L 196.06908483510242,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -375,13 +690,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Methods-Classifier fusion"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,233.965454,184.330460)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 196.06908483510242,16.339090402925194"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -392,13 +722,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Common-Bagging"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,233.863937,239.143997)">
             <path
               id="key"
               fill="none"
               d="M 0,32.71202025389286 L 196.2721215233571,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -409,13 +754,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Common-Boosting"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,234,273.500000)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 196,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -426,13 +786,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Common-AdaBoost"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,233.863937,275.143982)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 196.2721215233571,32.71202025389289"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -443,13 +818,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Regression-Multiple linear regression"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,-630.513184,-96.837723)">
             <path
               id="key"
               fill="none"
               d="M 197.02633403898972,65.67544467966323 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -460,13 +850,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Regression-Partial least squares"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,-630.136047,-62.356010)">
             <path
               id="key"
               fill="none"
               d="M 196.2721215233571,32.712020253892845 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -477,13 +882,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Regression-Multi-layer feed forward neural network"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,-630,-28)">
             <path
               id="key"
               fill="none"
               d="M 196,0 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -494,13 +914,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Regression-General regression neural network"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,-630.136047,-26.356010)">
             <path
               id="key"
               fill="none"
               d="M 196.2721215233571,0 L 0,32.71202025389284"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -511,13 +946,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="Regression-Support vector regression"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,-630.513184,-24.837723)">
             <path
               id="key"
               fill="none"
               d="M 197.02633403898972,0 L 0,65.67544467966324"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -531,11 +981,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -548,11 +999,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -565,11 +1017,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -582,11 +1035,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -595,11 +1049,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -612,11 +1067,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -629,11 +1085,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -646,11 +1103,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -663,11 +1121,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -680,11 +1139,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -693,11 +1153,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -710,11 +1171,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -727,11 +1189,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -744,11 +1207,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -761,11 +1225,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -778,11 +1243,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -795,11 +1261,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -812,11 +1279,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -825,11 +1293,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -842,11 +1311,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -859,11 +1329,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -872,11 +1343,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -885,11 +1357,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -898,11 +1371,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -911,11 +1385,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -924,11 +1399,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -941,11 +1417,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -958,11 +1435,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -975,11 +1453,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -992,11 +1471,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1009,11 +1489,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-layout-radial.svg b/packages/g6/__tests__/integration/snapshots/static/controller-layout-radial.svg
index 3c5c904759f..0a5775b784d 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-layout-radial.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-layout-radial.svg
@@ -18,13 +18,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-1"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,242.850418,210.644135)">
             <path
               id="key"
               fill="none"
               d="M 5.362188980164262,29.516895959488977 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -35,13 +50,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-2"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,253.699738,212.838303)">
             <path
               id="key"
               fill="none"
               d="M 0,27.87126918533545 L 11.099193712062316,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -52,13 +82,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-3"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,257.361877,222.928864)">
             <path
               id="key"
               fill="none"
               d="M 0,20.303349864062625 L 22.08561628250459,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -69,13 +114,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-4"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,255.205017,258.538605)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 15.61503371069685,25.615833752685262"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -86,13 +146,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-5"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,257.856720,256.186432)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 23.570145002873005,18.559334953611824"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -103,13 +178,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-7"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,259.306641,253.658737)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 27.919945158274686,10.976222658063193"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -120,13 +210,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-8"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,250.808441,210.130936)">
             <path
               id="key"
               fill="none"
               d="M 0,29.901798598647304 L 2.42531417382736,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -137,13 +242,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-9"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,259.976837,247.279236)">
             <path
               id="key"
               fill="none"
               d="M 0,2.040573537209184 L 29.930535902939027,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -154,13 +274,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-10"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,211.900864,253.046066)">
             <path
               id="key"
               fill="none"
               d="M 28.574353384624715,0 L 0,9.138209098038715"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -171,13 +306,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-11"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,210.867950,241.712494)">
             <path
               id="key"
               fill="none"
               d="M 29.349030658822755,6.2156337456950155 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -188,13 +338,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-13"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,252.443848,259.696777)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 7.331542983171715,29.090350399019826"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -205,13 +370,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-14"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,222.456924,220.993469)">
             <path
               id="key"
               fill="none"
               d="M 20.657308987193858,21.754898099968955 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -222,13 +402,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-15"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,259.074402,233.192703)">
             <path
               id="key"
               fill="none"
               d="M 0,12.605474483055616 L 27.22318645580208,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -239,13 +434,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-16"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,217.138855,255.701675)">
             <path
               id="key"
               fill="none"
               d="M 24.645858435040623,0 L 0,17.105016861085346"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -256,13 +466,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="2-3"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,276.733917,209.220688)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 1.8401976299358012,1.2676080404829122"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -273,13 +498,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="4-5"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,281.802612,286.057159)">
             <path
               id="key"
               fill="none"
               d="M 1.703399422048392,0 L 0,1.5109835676182684"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -290,13 +530,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="4-6"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,276.851105,302.658875)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 2.7060806402657818,32.647848769886195"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -307,13 +562,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="5-6"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,281.753479,290.837891)">
             <path
               id="key"
               fill="none"
               d="M 6.159806956079137,0 L 0,44.52898759366417"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -324,13 +594,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="7-13"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,269.727020,274.899231)">
             <path
               id="key"
               fill="none"
               d="M 19.29840130005323,0 L 0,16.979162549043963"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -341,13 +626,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="8-14"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,225.001038,203.491898)">
             <path
               id="key"
               fill="none"
               d="M 19.61125631416155,0 L 0,6.921699947590639"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -358,13 +658,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="10-22"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,163.646759,267.763947)">
             <path
               id="key"
               fill="none"
               d="M 29.055605528921376,0 L 0,7.60982805455717"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -375,13 +690,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="10-14"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,204.858582,223.428802)">
             <path
               id="key"
               fill="none"
               d="M 0,32.114588973695845 L 8.230072996016531,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -392,13 +722,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="10-12"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,203.322311,275.185486)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 5.355603449421778,56.34592992996943"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -409,13 +754,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="10-24"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,168.643784,270.953003)">
             <path
               id="key"
               fill="none"
               d="M 25.531614306167683,0 L 0,17.816584475219088"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -426,13 +786,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="10-21"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,173.224991,272.666077)">
             <path
               id="key"
               fill="none"
               d="M 22.464537070229426,0 L 0,24.981488497719283"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -443,13 +818,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="10-20"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,181.704147,274.302063)">
             <path
               id="key"
               fill="none"
               d="M 16.46432153760719,0 L 0,35.4974716907019"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -460,13 +850,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="11-24"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,166.396408,247.675415)">
             <path
               id="key"
               fill="none"
               d="M 28.735221624737164,0 L 0,38.78201152677846"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -477,13 +882,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="11-22"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,161.735123,245.945374)">
             <path
               id="key"
               fill="none"
               d="M 31.587748404679587,0 L 0,25.657230554309223"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -494,13 +914,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="11-14"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,205.966583,222.469360)">
             <path
               id="key"
               fill="none"
               d="M 0,8.443739911695673 L 4.7229170015039585,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -511,13 +946,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="12-13"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,217.365845,304.813660)">
             <path
               id="key"
               fill="none"
               d="M 0,30.343113248403142 L 37.11167254219444,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -528,13 +978,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="16-17"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,199.853928,288.327698)">
             <path
               id="key"
               fill="none"
               d="M 7.177434698033949,0 L 0,37.24625789047684"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -545,13 +1010,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="16-18"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,189.024246,287.372162)">
             <path
               id="key"
               fill="none"
               d="M 15.269744484777362,0 L 0,29.235497629208567"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -562,13 +1042,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="16-21"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,175.010849,283.820465)">
             <path
               id="key"
               fill="none"
               d="M 25.440314250592905,0 L 0,15.950742709655856"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -579,13 +1074,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="16-22"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,163.972443,278.016754)">
             <path
               id="key"
               fill="none"
               d="M 34.95172703330701,0.3822598564531745 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -596,13 +1106,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="17-18"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,189.889923,329.490265)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 2.576543429287881,1.8842761422663443"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -613,13 +1138,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="17-20"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,185.277344,325.152893)">
             <path
               id="key"
               fill="none"
               d="M 4.903567149200853,3.95877551508363 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -630,13 +1170,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="18-19"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,111.061218,282.108704)">
             <path
               id="key"
               fill="none"
               d="M 64.72569639486902,38.27291248733093 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -647,13 +1202,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="19-20"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,111.187027,281.889679)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 57.57594070519703,32.1107644376533"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -664,13 +1234,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="19-33"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,101.291267,267.086609)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 0.07250407798463243,0.6196296104226349"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -681,13 +1266,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="19-22"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,112.451973,277.191284)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 31.52255069296359,0.5436456563928687"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -698,13 +1298,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="19-23"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,101.009422,267.123657)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 1.3200156875521145,9.045352136492966"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -715,13 +1330,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="20-21"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,171.274643,311.042572)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 1.4856945790179452,1.8693664375927028"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -732,13 +1362,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="21-22"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,158.169861,286.984100)">
             <path
               id="key"
               fill="none"
               d="M 4.171750944668474,9.02248299601274 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -749,13 +1394,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="22-24"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,156.808670,285.176056)">
             <path
               id="key"
               fill="none"
               d="M 0.7987696079763396,2.047506802700582 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -766,13 +1426,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="22-26"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,108.861275,234.884369)">
             <path
               id="key"
               fill="none"
               d="M 37.87514747524044,36.12146270225631 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -783,13 +1458,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="22-23"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,110.653610,268.414429)">
             <path
               id="key"
               fill="none"
               d="M 33.55121677142451,7.352363977879236 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -800,13 +1490,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="22-28"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,108.697151,251.802673)">
             <path
               id="key"
               fill="none"
               d="M 36.612704053073685,21.109782531595783 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -817,13 +1522,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="22-30"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,112.856239,278.149933)">
             <path
               id="key"
               fill="none"
               d="M 31.119738058037967,0 L 0,0.7550755142306684"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -834,13 +1554,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="22-31"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,109.187035,257.975555)">
             <path
               id="key"
               fill="none"
               d="M 35.64992933524992,15.86584590100847 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -851,13 +1586,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="22-32"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,108.494614,244.568924)">
             <path
               id="key"
               fill="none"
               d="M 37.41332450702157,27.42625361091325 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -868,13 +1618,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="22-33"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,109.566643,261.280518)">
             <path
               id="key"
               fill="none"
               d="M 35.04133023137216,13.12034043094809 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -885,13 +1650,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="23-28"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,100.448433,256.283386)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 0.022517029023163104,0.514801197783413"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -902,13 +1682,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="23-27"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,70.360924,274.888855)">
             <path
               id="key"
               fill="none"
               d="M 25.446956186767466,0 L 0,43.17582332771485"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -919,13 +1714,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="23-29"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,65.302895,273.048218)">
             <path
               id="key"
               fill="none"
               d="M 28.22672421866349,0 L 0,25.995685796532257"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -936,13 +1746,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="23-30"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,101.343712,269.263092)">
             <path
               id="key"
               fill="none"
               d="M 1.057166381304512,6.8952516391773315 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -953,13 +1778,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="23-31"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,100.212051,256.296539)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 0.5122657675372011,7.590364865784068"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -970,13 +1810,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="23-33"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,100.083481,256.306030)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 0.9200244298385769,11.435771248354285"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -987,13 +1842,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="32-33"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,100.310295,247.774734)">
             <path
               id="key"
               fill="none"
               d="M 0,0.8812690005867125 L 0.010507375319065204,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1003,11 +1873,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1016,11 +1887,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1029,11 +1901,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1042,11 +1915,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1055,11 +1929,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1068,11 +1943,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1081,11 +1957,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1094,11 +1971,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1107,11 +1985,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1120,11 +1999,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1137,11 +2017,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1154,11 +2035,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1171,11 +2053,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1188,11 +2071,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1205,11 +2089,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1222,11 +2107,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1239,11 +2125,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1256,11 +2143,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1273,11 +2161,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1290,11 +2179,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1307,11 +2197,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1324,11 +2215,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1341,11 +2233,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1358,11 +2251,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1375,11 +2269,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1388,11 +2283,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1405,11 +2301,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1418,11 +2315,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1435,11 +2333,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1448,11 +2347,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1465,11 +2365,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1482,11 +2383,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1499,11 +2401,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1516,11 +2419,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
diff --git a/packages/g6/__tests__/integration/snapshots/static/edge-line.svg b/packages/g6/__tests__/integration/snapshots/static/edge-line.svg
index df7904f5a81..5ef4785148e 100644
--- a/packages/g6/__tests__/integration/snapshots/static/edge-line.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/edge-line.svg
@@ -18,17 +18,32 @@
           marker-end="true"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,53.792179,253.876205)">
+          <g
+            id="line-default"
+            fill="none"
+            marker-start="false"
+            marker-end="true"
+            stroke="transparent"
+            stroke-width="3"
+          />
+          <g transform="matrix(1,0,0,1,202.451492,265.559326)">
             <path
               id="key"
               fill="none"
-              d="M 176.58703789561196,0 L 5.886234591231936,33.72292703070127"
+              d="M 43.81921210476048,0 L 1.3984855141708852,176.98723373493257"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
-            <g transform="matrix(0.981039,-0.193810,0.193810,0.981039,5.886235,33.722927)">
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
+            />
+            <g transform="matrix(0.233081,-0.972457,0.972457,0.233081,1.398486,176.987228)">
               <path
-                id="g-svg-56"
+                id="g-svg-65"
                 fill="rgba(153,173,209,1)"
                 d="M 0,5 L 10,0 L 10,10 Z"
                 transform="translate(-5,-5)"
@@ -38,12 +53,23 @@
                 height="10"
                 stroke-dasharray="0,0"
               />
+              <path
+                id="g-svg-65"
+                fill="transparent"
+                d="M 0,5 L 10,0 L 10,10 Z"
+                transform="translate(-5,-5)"
+                stroke-width="3"
+                stroke="transparent"
+                width="10"
+                height="10"
+                stroke-dasharray="0,0"
+              />
             </g>
           </g>
           <g
             id="label"
             fill="none"
-            transform="matrix(0.981037,-0.193820,0.193820,0.981037,138.161545,272.094360)"
+            transform="matrix(0.233079,-0.972458,0.972458,0.233079,223.428787,360.860138)"
           >
             <g transform="matrix(1,0,0,1,-33.360001,-11.500000)">
               <path
@@ -59,7 +85,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -78,29 +104,54 @@
           marker-end="true"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,263.595673,103.317444)">
+          <g
+            id="line-active"
+            fill="none"
+            marker-start="false"
+            marker-end="true"
+            stroke="transparent"
+            stroke-width="3"
+          />
+          <g transform="matrix(1,0,0,1,54.421513,254.549728)">
             <path
               id="halo"
               fill="none"
-              d="M 0,132.01429768043556 L 122.36105429048052,0"
+              d="M 180.23899830062237,0 L 0,53.45937065115342"
               stroke-width="12"
               stroke="rgba(153,173,209,1)"
               stroke-dasharray="0,0"
               pointer-events="none"
               stroke-opacity="0.25"
             />
+            <path
+              id="halo"
+              fill="none"
+              d="M 180.23899830062237,0 L 0,53.45937065115342"
+              stroke-width="14"
+              stroke="transparent"
+              stroke-dasharray="0,0"
+              pointer-events="none"
+              stroke-opacity="0.25"
+            />
           </g>
-          <g transform="matrix(1,0,0,1,263.595673,103.317444)">
+          <g transform="matrix(1,0,0,1,54.421513,254.549728)">
             <path
               id="key"
               fill="none"
-              d="M 0,132.01429768043556 L 118.28235263180652,4.4004764264258815"
+              d="M 180.23899830062237,0 L 5.752308389769781,51.7532205437525"
               stroke-width="1"
               stroke="rgba(153,173,209,1)"
             />
-            <g transform="matrix(-0.679784,0.733413,-0.733413,-0.679784,118.282356,4.400476)">
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
+            />
+            <g transform="matrix(0.958718,-0.284358,0.284358,0.958718,5.752308,51.753220)">
               <path
-                id="g-svg-66"
+                id="g-svg-77"
                 fill="rgba(153,173,209,1)"
                 d="M 0,5 L 10,0 L 10,10 Z"
                 transform="translate(-5,-5)"
@@ -110,12 +161,23 @@
                 height="10"
                 stroke-dasharray="0,0"
               />
+              <path
+                id="g-svg-77"
+                fill="transparent"
+                d="M 0,5 L 10,0 L 10,10 Z"
+                transform="translate(-5,-5)"
+                stroke-width="3"
+                stroke="transparent"
+                width="10"
+                height="10"
+                stroke-dasharray="0,0"
+              />
             </g>
           </g>
           <g
             id="label"
             fill="none"
-            transform="matrix(0.679794,-0.733403,0.733403,0.679794,327.495361,166.390976)"
+            transform="matrix(0.958721,-0.284349,0.284349,0.958721,140.706131,282.416809)"
           >
             <g transform="matrix(1,0,0,1,-30.480000,-11.500000)">
               <path
@@ -131,7 +193,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -150,29 +212,54 @@
           marker-end="true"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,226.232605,269.858276)">
+          <g
+            id="line-selected"
+            fill="none"
+            marker-start="false"
+            marker-end="true"
+            stroke="transparent"
+            stroke-width="3"
+          />
+          <g transform="matrix(1,0,0,1,253.730240,51.621616)">
             <path
               id="halo"
               fill="none"
-              d="M 21.390655701393598,0 L 0,178.7244888405137"
+              d="M 0,182.8192947979772 L 43.83039981127209,0"
               stroke-width="12"
               stroke="rgba(153,173,209,1)"
               stroke-dasharray="0,0"
               pointer-events="none"
               stroke-opacity="0.25"
             />
+            <path
+              id="halo"
+              fill="none"
+              d="M 0,182.8192947979772 L 43.83039981127209,0"
+              stroke-width="14"
+              stroke="transparent"
+              stroke-dasharray="0,0"
+              pointer-events="none"
+              stroke-opacity="0.25"
+            />
           </g>
-          <g transform="matrix(1,0,0,1,226.232605,269.858276)">
+          <g transform="matrix(1,0,0,1,253.730240,51.621616)">
             <path
               id="key"
               fill="none"
-              d="M 21.390655701393598,0 L 0.7130218230136138,172.76700616073137"
+              d="M 0,182.8192947979772 L 42.4315572343817,5.834658468589113"
               stroke-width="2"
               stroke="rgba(153,173,209,1)"
             />
-            <g transform="matrix(0.118837,-0.992914,0.992914,0.118837,0.713022,172.767014)">
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="2"
+              stroke="transparent"
+            />
+            <g transform="matrix(-0.233140,0.972443,-0.972443,-0.233140,42.431557,5.834659)">
               <path
-                id="g-svg-69"
+                id="g-svg-80"
                 fill="rgba(153,173,209,1)"
                 d="M 0,5 L 10,0 L 10,10 Z"
                 transform="translate(-5,-5)"
@@ -182,32 +269,43 @@
                 height="10"
                 stroke-dasharray="0,0"
               />
+              <path
+                id="g-svg-80"
+                fill="transparent"
+                d="M 0,5 L 10,0 L 10,10 Z"
+                transform="translate(-5,-5)"
+                stroke-width="3"
+                stroke="transparent"
+                width="10"
+                height="10"
+                stroke-dasharray="0,0"
+              />
             </g>
           </g>
           <g
             id="label"
             fill="none"
-            transform="matrix(0.118841,-0.992913,0.992913,0.118841,236.452560,363.192169)"
+            transform="matrix(0.233134,-0.972445,0.972445,0.233134,276.577972,139.141479)"
           >
-            <g transform="matrix(1,0,0,1,-37.799999,-11.500000)">
+            <g transform="matrix(1,0,0,1,-44.099998,-13.500000)">
               <path
                 id="background"
                 fill="rgba(255,255,255,1)"
-                d="M 0,0 l 76.6,0 l 0,23 l-76.6 0 z"
+                d="M 0,0 l 89.19999999999999,0 l 0,27 l-89.19999999999999 0 z"
                 opacity="0.75"
                 stroke-width="0"
-                width="76.6"
-                height="23"
+                width="89.19999999999999"
+                height="27"
               />
             </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
-                font-size="12"
+                font-size="14"
                 text-anchor="middle"
                 font-weight="700"
               >
@@ -223,17 +321,32 @@
           marker-end="true"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,152.509552,75.370064)">
+          <g
+            id="line-highlight"
+            fill="none"
+            marker-start="false"
+            marker-end="true"
+            stroke="transparent"
+            stroke-width="3"
+          />
+          <g transform="matrix(1,0,0,1,101.979836,109.621826)">
             <path
               id="key"
               fill="none"
-              d="M 87.74139815117147,157.16693937987236 L 2.9247132814746704,5.238897996827736"
+              d="M 136.41073661623955,129.36812339003035 L 4.353534121851328,4.128769871266281"
               stroke-width="2"
               stroke="rgba(153,173,209,1)"
             />
-            <g transform="matrix(0.487452,0.873150,-0.873150,0.487452,2.924713,5.238898)">
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="2"
+              stroke="transparent"
+            />
+            <g transform="matrix(0.725589,0.688128,-0.688128,0.725589,4.353534,4.128770)">
               <path
-                id="g-svg-72"
+                id="g-svg-83"
                 fill="rgba(153,173,209,1)"
                 d="M 0,5 L 10,0 L 10,10 Z"
                 transform="translate(-5,-5)"
@@ -243,12 +356,23 @@
                 height="10"
                 stroke-dasharray="0,0"
               />
+              <path
+                id="g-svg-83"
+                fill="transparent"
+                d="M 0,5 L 10,0 L 10,10 Z"
+                transform="translate(-5,-5)"
+                stroke-width="3"
+                stroke="transparent"
+                width="10"
+                height="10"
+                stroke-dasharray="0,0"
+              />
             </g>
           </g>
           <g
             id="label"
             fill="none"
-            transform="matrix(0.487451,0.873151,-0.873151,0.487451,194.430450,150.460938)"
+            transform="matrix(0.725591,0.688126,-0.688126,0.725591,167.282852,171.553375)"
           >
             <g transform="matrix(1,0,0,1,-38.279999,-11.500000)">
               <path
@@ -264,7 +388,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -284,17 +408,32 @@
           marker-end="true"
           transform="matrix(1,0,0,1,0,0)"
         >
-          <g transform="matrix(1,0,0,1,268.151917,258.396912)">
+          <g
+            id="line-inactive"
+            fill="none"
+            marker-start="false"
+            marker-end="true"
+            stroke="transparent"
+            stroke-width="3"
+          />
+          <g transform="matrix(1,0,0,1,261.610138,261.009308)">
             <path
               id="key"
               fill="none"
-              d="M 0,0 L 157.92164720562496,73.05305765662291"
+              d="M 0,0 L 132.06524878186207,125.23085717999773"
               stroke-width="1"
               stroke="rgba(210,218,233,1)"
             />
-            <g transform="matrix(-0.907596,-0.419845,0.419845,-0.907596,157.921646,73.053055)">
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
+            />
+            <g transform="matrix(-0.725633,-0.688082,0.688082,-0.725633,132.065247,125.230858)">
               <path
-                id="g-svg-74"
+                id="g-svg-85"
                 fill="rgba(210,218,233,1)"
                 d="M 0,5 L 10,0 L 10,10 Z"
                 transform="translate(-5,-5)"
@@ -304,12 +443,23 @@
                 height="10"
                 stroke-dasharray="0,0"
               />
+              <path
+                id="g-svg-85"
+                fill="transparent"
+                d="M 0,5 L 10,0 L 10,10 Z"
+                transform="translate(-5,-5)"
+                stroke-width="3"
+                stroke="transparent"
+                width="10"
+                height="10"
+                stroke-dasharray="0,0"
+              />
             </g>
           </g>
           <g
             id="label"
             fill="none"
-            transform="matrix(0.907601,0.419833,-0.419833,0.907601,353.465912,297.862305)"
+            transform="matrix(0.725623,0.688093,-0.688093,0.725623,332.722168,328.441345)"
           >
             <g transform="matrix(1,0,0,1,-35.639999,-11.500000)">
               <path
@@ -325,7 +475,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -337,103 +487,213 @@
             </g>
           </g>
         </g>
+        <g
+          id="line-disabled"
+          fill="none"
+          marker-start="false"
+          marker-end="true"
+          transform="matrix(1,0,0,1,0,0)"
+        >
+          <g
+            id="line-disabled"
+            fill="none"
+            marker-start="false"
+            marker-end="true"
+            stroke="transparent"
+            stroke-width="3"
+          />
+          <g transform="matrix(1,0,0,1,265.339478,191.990356)">
+            <path
+              id="key"
+              fill="none"
+              d="M 0,53.459865401990044 L 174.48652914376112,1.7061660604911308"
+              stroke-width="1"
+              stroke="rgba(217,217,217,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
+            />
+            <g transform="matrix(-0.958717,0.284361,-0.284361,-0.958717,174.486526,1.706166)">
+              <path
+                id="g-svg-87"
+                fill="rgba(217,217,217,1)"
+                d="M 0,5 L 10,0 L 10,10 Z"
+                transform="translate(-5,-5)"
+                stroke-width="1"
+                stroke="rgba(217,217,217,1)"
+                width="10"
+                height="10"
+                stroke-dasharray="0,0"
+              />
+              <path
+                id="g-svg-87"
+                fill="transparent"
+                d="M 0,5 L 10,0 L 10,10 Z"
+                transform="translate(-5,-5)"
+                stroke-width="3"
+                stroke="transparent"
+                width="10"
+                height="10"
+                stroke-dasharray="0,0"
+              />
+            </g>
+          </g>
+          <g
+            id="label"
+            fill="none"
+            transform="matrix(0.958717,-0.284364,0.284364,0.958717,359.293762,217.582840)"
+          >
+            <g transform="matrix(1,0,0,1,-37.619999,-11.500000)">
+              <path
+                id="background"
+                fill="rgba(255,255,255,1)"
+                d="M 0,0 l 76.24000000000001,0 l 0,23 l-76.24000000000001 0 z"
+                opacity="0.75"
+                stroke-width="0"
+                width="76.24000000000001"
+                height="23"
+              />
+            </g>
+            <g transform="matrix(1,0,0,1,0,0)">
+              <text
+                id="text"
+                fill="rgba(0,0,0,0.8509803921568627)"
+                dominant-baseline="central"
+                paint-order="stroke"
+                dx="0.5"
+                font-size="12"
+                text-anchor="middle"
+              >
+                line-disabled
+              </text>
+            </g>
+          </g>
+        </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,250,250)">
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(23,131,255,1)"
-              transform="translate(-20,-20)"
-              cx="20"
-              cy="20"
-              stroke="rgba(139,155,175,1)"
-              r="20"
+              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"
             />
           </g>
         </g>
         <g
           id="node2"
           fill="none"
-          transform="matrix(1,0,0,1,34.171398,292.638184)"
+          transform="matrix(1,0,0,1,198.722198,463.940613)"
         >
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(23,131,255,1)"
-              transform="translate(-20,-20)"
-              cx="20"
-              cy="20"
-              stroke="rgba(139,155,175,1)"
-              r="20"
+              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"
             />
           </g>
         </g>
         <g
           id="node3"
           fill="none"
-          transform="matrix(1,0,0,1,399.552399,88.649193)"
+          transform="matrix(1,0,0,1,39.082024,312.558838)"
         >
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(23,131,255,1)"
-              transform="translate(-20,-20)"
-              cx="20"
-              cy="20"
-              stroke="rgba(139,155,175,1)"
-              r="20"
+              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"
             />
           </g>
         </g>
         <g
           id="node4"
           fill="none"
-          transform="matrix(1,0,0,1,223.855865,468.441040)"
+          transform="matrix(1,0,0,1,301.290894,36.062527)"
         >
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(23,131,255,1)"
-              transform="translate(-20,-20)"
-              cx="20"
-              cy="20"
-              stroke="rgba(139,155,175,1)"
-              r="20"
+              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"
             />
           </g>
         </g>
         <g
           id="node5"
           fill="none"
-          transform="matrix(1,0,0,1,142.760513,57.907074)"
+          transform="matrix(1,0,0,1,90.370415,98.611771)"
         >
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(23,131,255,1)"
-              transform="translate(-20,-20)"
-              cx="20"
-              cy="20"
-              stroke="rgba(139,155,175,1)"
-              r="20"
+              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"
             />
           </g>
         </g>
         <g
           id="node6"
           fill="none"
-          transform="matrix(1,0,0,1,449.671051,342.365936)"
+          transform="matrix(1,0,0,1,409.639313,401.377960)"
+        >
+          <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"
+            />
+          </g>
+        </g>
+        <g
+          id="node7"
+          fill="none"
+          transform="matrix(1,0,0,1,460.917786,187.440582)"
         >
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(23,131,255,1)"
-              transform="translate(-20,-20)"
-              cx="20"
-              cy="20"
-              stroke="rgba(139,155,175,1)"
-              r="20"
+              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"
             />
           </g>
         </g>
diff --git a/packages/g6/__tests__/integration/snapshots/static/graph-element.svg b/packages/g6/__tests__/integration/snapshots/static/graph-element.svg
index 0a451ee2ecb..14b17fe3d81 100644
--- a/packages/g6/__tests__/integration/snapshots/static/graph-element.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/graph-element.svg
@@ -18,13 +18,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-1"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,246.245651,273.677124)">
             <path
               id="key"
               fill="none"
               d="M 35.61638716424511,0 L 0,28.226297202309183"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -35,13 +50,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-2"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,292.727661,218.066345)">
             <path
               id="key"
               fill="none"
               d="M 0,39.86927021565427 L 12.668806639725062,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -52,13 +82,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-3"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,299.670929,264.139618)">
             <path
               id="key"
               fill="none"
               d="M 0,2.5738047395758485 L 34.101035332620086,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -69,13 +114,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-4"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,234.277817,239.502548)">
             <path
               id="key"
               fill="none"
               d="M 46.4935439661881,23.458810754559522 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -86,13 +146,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-5"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,296.865631,244.876404)">
             <path
               id="key"
               fill="none"
               d="M 0,15.615165033847006 L 16.044802839007275,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -103,13 +178,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-7"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,287.155212,198.188736)">
             <path
               id="key"
               fill="none"
               d="M 2.1770789792049072,59.2840409007938 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -120,13 +210,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-8"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,293.204285,276.831665)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 13.891510679878024,37.119121088738666"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -137,13 +242,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-9"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,232.732117,270.623505)">
             <path
               id="key"
               fill="none"
               d="M 47.478724720867035,0 L 0,15.79948194533415"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -154,13 +274,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-10"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,268.292023,260.030243)">
             <path
               id="key"
               fill="none"
               d="M 11.960906669478277,4.154608885698053 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -171,13 +306,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-11"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,235.711823,275.250641)">
             <path
               id="key"
               fill="none"
               d="M 47.710514477864194,0 L 0,59.17017201837007"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -188,13 +338,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-13"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,295.070679,213.946198)">
             <path
               id="key"
               fill="none"
               d="M 0,45.08490816522476 L 28.71033572960141,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -205,13 +370,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-14"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,256.847076,275.862152)">
             <path
               id="key"
               fill="none"
               d="M 27.42035417012505,0 L 0,42.38414291712081"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -222,13 +402,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-15"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,267.651855,222.380203)">
             <path
               id="key"
               fill="none"
               d="M 17.65444089179448,36.10241558458486 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -239,13 +434,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="0-16"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,283.302429,277.136566)">
             <path
               id="key"
               fill="none"
               d="M 3.851143392898166,0 L 0,14.629561027214322"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -256,13 +466,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="2-3"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,313.838623,216.943710)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 24.491166512846917,38.035506917702946"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -273,13 +498,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="4-5"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,235.345184,235.304291)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 74.73632076631873,2.291210746699221"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -290,13 +530,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="4-6"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,232.689957,241.789276)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 34.508320303415985,31.92883723421906"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -307,13 +562,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="5-6"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,281.840515,244.734116)">
             <path
               id="key"
               fill="none"
               d="M 30.934160251457115,0 L 0,28.94323250343507"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -324,13 +594,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="7-13"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,296.044861,191.978989)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 23.850961862401277,9.748768605201633"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -341,13 +626,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="8-14"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,261.399445,323.877472)">
             <path
               id="key"
               fill="none"
               d="M 39.21709844120903,0 L 0,2.2038611080279225"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -358,13 +658,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="9-10"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,230.595001,263.528290)">
             <path
               id="key"
               fill="none"
               d="M 0,19.27291557083015 L 20.899314540371847,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -375,13 +690,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="10-22"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,208.564194,258.934082)">
             <path
               id="key"
               fill="none"
               d="M 40.52308016537103,0 L 0,9.073624561243378"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -392,13 +722,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="10-14"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,252.472366,266.693024)">
             <path
               id="key"
               fill="none"
               d="M 5.3161293137818575,0 L 0,50.00544281352279"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -409,13 +754,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="10-12"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,259.413086,198.787903)">
             <path
               id="key"
               fill="none"
               d="M 0,47.97726158515928 L 2.726771474451539,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -426,13 +786,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="10-24"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,259.577820,266.722198)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 2.458099331453468,33.4823303680987"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -443,13 +818,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="10-21"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,268.100159,249.523743)">
             <path
               id="key"
               fill="none"
               d="M 0,3.4366518208672687 L 8.394682122860331,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -460,13 +850,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="10-20"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,231.440796,200.235840)">
             <path
               id="key"
               fill="none"
               d="M 23.041528828836363,47.51535772230915 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -477,13 +882,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="11-24"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,236.645752,317.106140)">
             <path
               id="key"
               fill="none"
               d="M 0,18.17080824514653 L 18.91147691709864,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -494,13 +914,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="11-22"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,202.719803,279.394928)">
             <path
               id="key"
               fill="none"
               d="M 22.801123887290316,53.608254695921346 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -511,13 +946,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="11-14"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,237.596252,332.421021)">
             <path
               id="key"
               fill="none"
               d="M 0,4.005807629756077 L 5.657584301641407,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -528,13 +978,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="12-13"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,272.405396,191.242554)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 47.048919585856424,11.830185065134856"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -545,13 +1010,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="16-17"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,233.360535,261.968750)">
             <path
               id="key"
               fill="none"
               d="M 39.711657270580275,33.06884516011223 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -562,13 +1042,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="16-18"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,283.425201,241.392075)">
             <path
               id="key"
               fill="none"
               d="M 0,50.40721248622617 L 13.95725889980281,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -579,13 +1074,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="16-21"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,281.649445,255.695160)">
             <path
               id="key"
               fill="none"
               d="M 0,35.78144198729049 L 3.207162785654532,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -596,13 +1106,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="16-22"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,208.149780,273.755127)">
             <path
               id="key"
               fill="none"
               d="M 63.26299212760168,24.119157614509163 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -613,13 +1138,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="17-18"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,235.199707,234.804199)">
             <path
               id="key"
               fill="none"
               d="M 0,17.715974808720944 L 55.327570795201154,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -630,13 +1170,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="17-20"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,225.893829,201.235611)">
             <path
               id="key"
               fill="none"
               d="M 0,44.33643968126785 L 0.9658643436108605,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -647,13 +1202,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="18-19"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,252.440018,233.997208)">
             <path
               id="key"
               fill="none"
               d="M 37.865630908967546,0 L 0,8.713295797585516"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -664,13 +1234,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="19-20"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,229.869293,200.840363)">
             <path
               id="key"
               fill="none"
               d="M 10.033584618461532,34.510260830747995 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -681,13 +1266,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="19-33"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,181.032990,231.767197)">
             <path
               id="key"
               fill="none"
               d="M 51.8828002353568,11.094678366315122 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -698,13 +1298,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="19-22"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,207.474579,249.938248)">
             <path
               id="key"
               fill="none"
               d="M 26.55136133956529,0 L 0,15.269219843607601"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -715,13 +1330,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="19-23"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,232.739456,181.268661)">
             <path
               id="key"
               fill="none"
               d="M 8.410787776521943,53.80432204768948 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -732,13 +1362,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="20-21"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,234.404419,198.043564)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 44.01800905081532,40.88593639189287"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -749,13 +1394,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="21-22"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,208.432205,248.443039)">
             <path
               id="key"
               fill="none"
               d="M 67.69078312508103,0 L 0,19.041738165301012"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -766,13 +1426,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="22-24"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,207.285309,275.493530)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 47.003320214832,29.383372678163255"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -783,13 +1458,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="22-25"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,150.763931,268.834167)">
             <path
               id="key"
               fill="none"
               d="M 38.04589458008985,1.075867718356676 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -800,13 +1490,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="22-26"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,208.048477,274.010254)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 30.247501485533576,12.493263921122207"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -817,13 +1522,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="22-23"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,201.920853,180.891113)">
             <path
               id="key"
               fill="none"
               d="M 0,79.79915139806096 L 26.159121857270804,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -834,13 +1554,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="22-28"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,192.773743,208.056488)">
             <path
               id="key"
               fill="none"
               d="M 5.065851150217895,52.18302847759921 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -851,13 +1586,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="22-30"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,179.334412,219.372025)">
             <path
               id="key"
               fill="none"
               d="M 15.893641594087569,41.48262204487517 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -868,13 +1618,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="22-31"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,205.642059,231.310806)">
             <path
               id="key"
               fill="none"
               d="M 0,31.583550217949522 L 29.58367022141323,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -885,13 +1650,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="22-32"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,164.266037,275.796387)">
             <path
               id="key"
               fill="none"
               d="M 26.257348110806106,0 L 0,17.764939892381108"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -902,13 +1682,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="22-33"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,176.877228,237.945282)">
             <path
               id="key"
               fill="none"
               d="M 16.305438130624964,23.978213649430472 L 0,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -919,13 +1714,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="23-28"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,200.083481,177.001862)">
             <path
               id="key"
               fill="none"
               d="M 22.835518702352488,0 L 0,15.488216685862028"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -936,13 +1746,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="23-27"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,224.026993,181.167267)">
             <path
               id="key"
               fill="none"
               d="M 5.075415833079262,0 L 0,23.717283998073242"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -953,13 +1778,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="23-29"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,239.352875,177.172165)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 34.923425461929156,24.758901137159626"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -970,13 +1810,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="23-30"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,183.960159,177.107224)">
             <path
               id="key"
               fill="none"
               d="M 39.031301320875286,0 L 0,27.208172327005343"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -987,13 +1842,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="23-31"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,233.217346,181.182022)">
             <path
               id="key"
               fill="none"
               d="M 0,0 L 6.8222433775148374,33.03705724129594"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1004,13 +1874,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="23-33"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,178.423340,178.360153)">
             <path
               id="key"
               fill="none"
               d="M 45.60239539517812,0 L 0,44.34441645447964"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1021,13 +1906,28 @@
           marker-end="false"
           transform="matrix(1,0,0,1,0,0)"
         >
+          <g
+            id="32-33"
+            fill="none"
+            marker-start="false"
+            marker-end="false"
+            stroke="transparent"
+            stroke-width="3"
+          />
           <g transform="matrix(1,0,0,1,158.129913,239.443008)">
             <path
               id="key"
               fill="none"
               d="M 0,49.95502636544995 L 10.977834090247256,0"
               stroke-width="1"
-              stroke="rgba(139,155,175,1)"
+              stroke="rgba(153,173,209,1)"
+            />
+            <path
+              id="key"
+              fill="none"
+              d="M 0,0 L 0,0"
+              stroke-width="3"
+              stroke="transparent"
             />
           </g>
         </g>
@@ -1037,11 +1937,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1050,11 +1951,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1063,11 +1965,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1076,11 +1979,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1089,11 +1993,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1102,11 +2007,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1115,11 +2021,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1128,11 +2035,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1141,11 +2049,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1154,11 +2063,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1171,11 +2081,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1188,11 +2099,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1205,11 +2117,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1222,11 +2135,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1239,11 +2153,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1256,11 +2171,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1273,11 +2189,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1290,11 +2207,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1307,11 +2225,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1324,11 +2243,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1341,11 +2261,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1358,11 +2279,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1375,11 +2297,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1392,11 +2315,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1409,11 +2333,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1426,11 +2351,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1443,11 +2369,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1460,11 +2387,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1477,11 +2405,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1494,11 +2423,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1511,11 +2441,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1528,11 +2459,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1545,11 +2477,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
@@ -1562,11 +2495,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-10,-10)"
               cx="10"
               cy="10"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="10"
             />
           </g>
diff --git a/packages/g6/__tests__/integration/snapshots/static/node-circle.svg b/packages/g6/__tests__/integration/snapshots/static/node-circle.svg
index 58589f521bc..d8f9fe36acf 100644
--- a/packages/g6/__tests__/integration/snapshots/static/node-circle.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/node-circle.svg
@@ -20,11 +20,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-20,-20)"
               cx="20"
               cy="20"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="20"
             />
           </g>
@@ -32,9 +33,9 @@
             <g transform="matrix(1,0,0,1,-15.780000,0)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 32.56,0 l 0,23 l-32.56 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="32.56"
                 height="23"
@@ -43,7 +44,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -58,21 +59,22 @@
           <g
             id="icon"
             fill="none"
-            width="30"
-            height="30"
+            width="20"
+            height="20"
             transform="matrix(1,0,0,1,0,0)"
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
                 href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
-                transform="translate(-15,-15)"
-                width="30"
-                height="30"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
               />
             </g>
           </g>
@@ -89,10 +91,10 @@
               transform="translate(-20,-20)"
               cx="20"
               cy="20"
-              stroke="rgba(23,131,255,1)"
+              stroke-width="12"
+              stroke="rgba(34,126,255,1)"
               r="20"
               stroke-dasharray="0,0"
-              stroke-width="12"
               stroke-opacity="0.25"
               pointer-events="none"
             />
@@ -100,11 +102,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-20,-20)"
               cx="20"
               cy="20"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="20"
             />
           </g>
@@ -112,9 +115,9 @@
             <g transform="matrix(1,0,0,1,-30.780001,0)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 62.56,0 l 0,23 l-62.56 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="62.56"
                 height="23"
@@ -123,7 +126,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -138,21 +141,22 @@
           <g
             id="icon"
             fill="none"
-            width="30"
-            height="30"
+            width="20"
+            height="20"
             transform="matrix(1,0,0,1,0,0)"
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
                 href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
-                transform="translate(-15,-15)"
-                width="30"
-                height="30"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
               />
             </g>
           </g>
@@ -165,30 +169,31 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-20,-20)"
               cx="20"
               cy="20"
-              stroke="rgba(139,155,175,1)"
+              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,-38.880001,0)">
+            <g transform="matrix(1,0,0,1,-40.020000,0)">
               <path
                 id="background"
-                fill="none"
-                d="M 0,0 l 78.76,0 l 0,23 l-78.76 0 z"
-                opacity="0.75"
+                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="78.76"
+                width="81.04"
                 height="23"
               />
             </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -196,28 +201,29 @@
                 font-size="12"
                 text-anchor="middle"
               >
-                circle-badg...
+                circle-badges
               </text>
             </g>
           </g>
           <g
             id="icon"
             fill="none"
-            width="30"
-            height="30"
+            width="20"
+            height="20"
             transform="matrix(1,0,0,1,0,0)"
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
                 href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
-                transform="translate(-15,-15)"
-                width="30"
-                height="30"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
               />
             </g>
           </g>
@@ -226,7 +232,7 @@
               <g transform="matrix(1,0,0,1,-4,-1)">
                 <path
                   id="background"
-                  fill="rgba(130,145,178,1)"
+                  fill="rgba(126,146,181,1)"
                   d="M 7.26,0 l 0,0 a 7.26,7.26,0,0,1,7.26,7.26 l 0,4.48 a 7.26,7.26,0,0,1,-7.26,7.26 l 0,0 a 7.26,7.26,0,0,1,-7.26,-7.26 l 0,-4.48 a 7.26,7.26,0,0,1,7.26,-7.26 z"
                   stroke-width="0"
                   width="14.52"
@@ -254,7 +260,7 @@
               <g transform="matrix(1,0,0,1,-4,-9.500000)">
                 <path
                   id="background"
-                  fill="rgba(230,108,91,1)"
+                  fill="rgba(248,98,84,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"
@@ -281,7 +287,7 @@
               <g transform="matrix(1,0,0,1,-4,-18)">
                 <path
                   id="background"
-                  fill="rgba(229,185,94,1)"
+                  fill="rgba(237,183,75,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"
@@ -313,11 +319,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-20,-20)"
               cx="20"
               cy="20"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="20"
             />
           </g>
@@ -325,9 +332,9 @@
             <g transform="matrix(1,0,0,1,-33.840000,0)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 68.68,0 l 0,23 l-68.68 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="68.68"
                 height="23"
@@ -336,7 +343,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -351,70 +358,75 @@
           <g
             id="icon"
             fill="none"
-            width="30"
-            height="30"
+            width="20"
+            height="20"
             transform="matrix(1,0,0,1,0,0)"
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
                 href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
-                transform="translate(-15,-15)"
-                width="30"
-                height="30"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
               />
             </g>
           </g>
           <g transform="matrix(1,0,0,1,-20,0)">
             <circle
               id="port-0"
-              fill="rgba(255,255,255,1)"
-              transform="translate(-2,-2)"
-              cx="2"
-              cy="2"
-              stroke="rgba(49,208,198,1)"
-              r="2"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-3,-3)"
+              cx="3"
+              cy="3"
               stroke-width="1"
+              r="3"
+              stroke="rgba(0,0,0,1)"
+              stroke-opacity="0.65"
             />
           </g>
           <g transform="matrix(1,0,0,1,20,0)">
             <circle
               id="port-1"
-              fill="rgba(255,255,255,1)"
-              transform="translate(-2,-2)"
-              cx="2"
-              cy="2"
-              stroke="rgba(49,208,198,1)"
-              r="2"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-3,-3)"
+              cx="3"
+              cy="3"
               stroke-width="1"
+              r="3"
+              stroke="rgba(0,0,0,1)"
+              stroke-opacity="0.65"
             />
           </g>
           <g transform="matrix(1,0,0,1,0,-20)">
             <circle
               id="port-2"
-              fill="rgba(255,255,255,1)"
-              transform="translate(-2,-2)"
-              cx="2"
-              cy="2"
-              stroke="rgba(49,208,198,1)"
-              r="2"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-3,-3)"
+              cx="3"
+              cy="3"
               stroke-width="1"
+              r="3"
+              stroke="rgba(0,0,0,1)"
+              stroke-opacity="0.65"
             />
           </g>
           <g transform="matrix(1,0,0,1,0,20)">
             <circle
               id="port-3"
-              fill="rgba(255,255,255,1)"
-              transform="translate(-2,-2)"
-              cx="2"
-              cy="2"
-              stroke="rgba(49,208,198,1)"
-              r="2"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-3,-3)"
+              cx="3"
+              cy="3"
               stroke-width="1"
+              r="3"
+              stroke="rgba(0,0,0,1)"
+              stroke-opacity="0.65"
             />
           </g>
         </g>
@@ -426,10 +438,10 @@
               transform="translate(-20,-20)"
               cx="20"
               cy="20"
-              stroke="rgba(23,131,255,1)"
+              stroke-width="12"
+              stroke="rgba(34,126,255,1)"
               r="20"
               stroke-dasharray="0,0"
-              stroke-width="12"
               stroke-opacity="0.25"
               pointer-events="none"
             />
@@ -437,11 +449,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-20,-20)"
               cx="20"
               cy="20"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="20"
             />
           </g>
@@ -449,9 +462,9 @@
             <g transform="matrix(1,0,0,1,-36.060001,0)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 73.11999999999999,0 l 0,23 l-73.11999999999999 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="73.11999999999999"
                 height="23"
@@ -460,7 +473,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -475,21 +488,22 @@
           <g
             id="icon"
             fill="none"
-            width="30"
-            height="30"
+            width="20"
+            height="20"
             transform="matrix(1,0,0,1,0,0)"
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
                 href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
-                transform="translate(-15,-15)"
-                width="30"
-                height="30"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
               />
             </g>
           </g>
@@ -506,8 +520,8 @@
               transform="translate(-20,-20)"
               cx="20"
               cy="20"
-              stroke="rgba(23,131,255,1)"
               stroke-width="12"
+              stroke="rgba(34,126,255,1)"
               r="20"
               stroke-dasharray="0,0"
               stroke-opacity="0.25"
@@ -517,60 +531,62 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-20,-20)"
               cx="20"
               cy="20"
+              stroke-width="3"
               stroke="rgba(0,0,0,1)"
               r="20"
-              stroke-width="2"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-39.419998,0)">
+            <g transform="matrix(1,0,0,1,-50.610001,0)">
               <path
                 id="background"
-                fill="none"
-                d="M 0,0 l 79.83999999999999,0 l 0,23 l-79.83999999999999 0 z"
-                opacity="0.75"
+                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="79.83999999999999"
-                height="23"
+                width="102.22"
+                height="27"
               />
             </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
-                dy="11.5px"
-                font-size="12"
+                dy="13.5px"
+                font-size="14"
                 text-anchor="middle"
+                font-weight="700"
               >
-                circle-selec...
+                circle-selected
               </text>
             </g>
           </g>
           <g
             id="icon"
             fill="none"
-            width="30"
-            height="30"
+            width="20"
+            height="20"
             transform="matrix(1,0,0,1,0,0)"
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
                 href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
-                transform="translate(-15,-15)"
-                width="30"
-                height="30"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
               />
             </g>
           </g>
@@ -583,60 +599,63 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-20,-20)"
               cx="20"
               cy="20"
+              stroke-width="3"
               stroke="rgba(0,0,0,1)"
               r="20"
-              stroke-width="2"
+              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.840000,0)">
+            <g transform="matrix(1,0,0,1,-43.860001,0)">
               <path
                 id="background"
-                fill="none"
-                d="M 0,0 l 80,0 l 0,23 l-80 0 z"
-                opacity="0.75"
+                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="80"
+                width="88.72000000000001"
                 height="23"
               />
             </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
                 dy="11.5px"
                 font-size="12"
                 text-anchor="middle"
+                font-weight="700"
               >
-                circle-highli...
+                circle-highlight
               </text>
             </g>
           </g>
           <g
             id="icon"
             fill="none"
-            width="30"
-            height="30"
+            width="20"
+            height="20"
             transform="matrix(1,0,0,1,0,0)"
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
                 href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
-                transform="translate(-15,-15)"
-                width="30"
-                height="30"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
               />
             </g>
           </g>
@@ -649,31 +668,101 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <circle
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,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"
+                fill="rgba(0,0,0,0.8509803921568627)"
+                dominant-baseline="central"
+                paint-order="stroke"
+                dx="0.5"
+                dy="11.5px"
+                font-size="12"
+                text-anchor="middle"
+                opacity="0.25"
+              >
+                circle-inactive
+              </text>
+            </g>
+          </g>
+          <g
+            id="icon"
+            fill="none"
+            width="20"
+            height="20"
+            transform="matrix(1,0,0,1,0,0)"
+          >
+            <g transform="matrix(1,0,0,1,0,0)">
+              <image
+                id="icon"
+                fill="rgba(255,255,255,1)"
+                preserveAspectRatio="none"
+                x="0"
+                y="0"
+                href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
+                opacity="0.25"
+              />
+            </g>
+          </g>
+        </g>
+        <g
+          id="circle-disabled"
+          fill="none"
+          transform="matrix(1,0,0,1,416.666656,416.666656)"
+        >
+          <g transform="matrix(1,0,0,1,0,0)">
+            <circle
+              id="key"
+              fill="rgba(240,240,240,1)"
               transform="translate(-20,-20)"
               cx="20"
               cy="20"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               r="20"
-              opacity="0.2"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-38.459999,0)">
+            <g transform="matrix(1,0,0,1,-43.200001,0)">
               <path
                 id="background"
-                fill="none"
-                d="M 0,0 l 77.92,0 l 0,23 l-77.92 0 z"
-                opacity="0.75"
+                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="77.92"
+                width="87.4"
                 height="23"
               />
             </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -681,28 +770,29 @@
                 font-size="12"
                 text-anchor="middle"
               >
-                circle-inact...
+                circle-disabled
               </text>
             </g>
           </g>
           <g
             id="icon"
             fill="none"
-            width="30"
-            height="30"
+            width="20"
+            height="20"
             transform="matrix(1,0,0,1,0,0)"
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
                 href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
-                transform="translate(-15,-15)"
-                width="30"
-                height="30"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
               />
             </g>
           </g>
diff --git a/packages/g6/__tests__/integration/snapshots/static/node-ellipse.svg b/packages/g6/__tests__/integration/snapshots/static/node-ellipse.svg
index 1fbe4f0f882..1989ba423ce 100644
--- a/packages/g6/__tests__/integration/snapshots/static/node-ellipse.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/node-ellipse.svg
@@ -20,11 +20,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <ellipse
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-22.5,-17.5)"
               cx="22.5"
               cy="17.5"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               rx="22.5"
               ry="17.5"
             />
@@ -33,9 +34,9 @@
             <g transform="matrix(1,0,0,1,-18.600000,0)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 38.2,0 l 0,23 l-38.2 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="38.2"
                 height="23"
@@ -44,7 +45,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -59,21 +60,22 @@
           <g
             id="icon"
             fill="none"
-            width="28"
-            height="28"
+            width="20"
+            height="20"
             transform="matrix(1,0,0,1,0,0)"
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
                 href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
-                transform="translate(-14,-14)"
-                width="28"
-                height="28"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
               />
             </g>
           </g>
@@ -90,11 +92,11 @@
               transform="translate(-22.5,-17.5)"
               cx="22.5"
               cy="17.5"
-              stroke="rgba(23,131,255,1)"
+              stroke-width="12"
+              stroke="rgba(34,126,255,1)"
               rx="22.5"
               ry="17.5"
               stroke-dasharray="0,0"
-              stroke-width="12"
               stroke-opacity="0.25"
               pointer-events="none"
             />
@@ -102,11 +104,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <ellipse
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-22.5,-17.5)"
               cx="22.5"
               cy="17.5"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               rx="22.5"
               ry="17.5"
             />
@@ -115,9 +118,9 @@
             <g transform="matrix(1,0,0,1,-33.599998,0)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 68.2,0 l 0,23 l-68.2 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="68.2"
                 height="23"
@@ -126,7 +129,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -141,21 +144,22 @@
           <g
             id="icon"
             fill="none"
-            width="28"
-            height="28"
+            width="20"
+            height="20"
             transform="matrix(1,0,0,1,0,0)"
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
                 href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
-                transform="translate(-14,-14)"
-                width="28"
-                height="28"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
               />
             </g>
           </g>
@@ -168,11 +172,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <ellipse
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-22.5,-17.5)"
               cx="22.5"
               cy="17.5"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               rx="22.5"
               ry="17.5"
             />
@@ -181,9 +186,9 @@
             <g transform="matrix(1,0,0,1,-42.840000,0)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 86.67999999999999,0 l 0,23 l-86.67999999999999 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="86.67999999999999"
                 height="23"
@@ -192,7 +197,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -207,21 +212,22 @@
           <g
             id="icon"
             fill="none"
-            width="28"
-            height="28"
+            width="20"
+            height="20"
             transform="matrix(1,0,0,1,0,0)"
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
                 href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
-                transform="translate(-14,-14)"
-                width="28"
-                height="28"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
               />
             </g>
           </g>
@@ -234,7 +240,7 @@
               <g transform="matrix(1,0,0,1,-4,-1)">
                 <path
                   id="background"
-                  fill="rgba(130,145,178,1)"
+                  fill="rgba(126,146,181,1)"
                   d="M 7.26,0 l 0,0 a 7.26,7.26,0,0,1,7.26,7.26 l 0,4.48 a 7.26,7.26,0,0,1,-7.26,7.26 l 0,0 a 7.26,7.26,0,0,1,-7.26,-7.26 l 0,-4.48 a 7.26,7.26,0,0,1,7.26,-7.26 z"
                   stroke-width="0"
                   width="14.52"
@@ -262,7 +268,7 @@
               <g transform="matrix(1,0,0,1,-4,-9.500000)">
                 <path
                   id="background"
-                  fill="rgba(230,108,91,1)"
+                  fill="rgba(248,98,84,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"
@@ -293,7 +299,7 @@
               <g transform="matrix(1,0,0,1,-4,-18)">
                 <path
                   id="background"
-                  fill="rgba(229,185,94,1)"
+                  fill="rgba(237,183,75,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"
@@ -325,11 +331,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <ellipse
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-22.5,-17.5)"
               cx="22.5"
               cy="17.5"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               rx="22.5"
               ry="17.5"
             />
@@ -338,9 +345,9 @@
             <g transform="matrix(1,0,0,1,-36.660000,0)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 74.32000000000001,0 l 0,23 l-74.32000000000001 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="74.32000000000001"
                 height="23"
@@ -349,7 +356,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -364,70 +371,75 @@
           <g
             id="icon"
             fill="none"
-            width="28"
-            height="28"
+            width="20"
+            height="20"
             transform="matrix(1,0,0,1,0,0)"
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
                 href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
-                transform="translate(-14,-14)"
-                width="28"
-                height="28"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
               />
             </g>
           </g>
           <g transform="matrix(1,0,0,1,-22.500000,0)">
             <circle
               id="port-0"
-              fill="rgba(255,255,255,1)"
-              transform="translate(-2,-2)"
-              cx="2"
-              cy="2"
-              stroke="rgba(49,208,198,1)"
-              r="2"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-3,-3)"
+              cx="3"
+              cy="3"
               stroke-width="1"
+              r="3"
+              stroke="rgba(0,0,0,1)"
+              stroke-opacity="0.65"
             />
           </g>
           <g transform="matrix(1,0,0,1,22.500000,0)">
             <circle
               id="port-1"
-              fill="rgba(255,255,255,1)"
-              transform="translate(-2,-2)"
-              cx="2"
-              cy="2"
-              stroke="rgba(49,208,198,1)"
-              r="2"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-3,-3)"
+              cx="3"
+              cy="3"
               stroke-width="1"
+              r="3"
+              stroke="rgba(0,0,0,1)"
+              stroke-opacity="0.65"
             />
           </g>
           <g transform="matrix(1,0,0,1,0,-17.500000)">
             <circle
               id="port-2"
-              fill="rgba(255,255,255,1)"
-              transform="translate(-2,-2)"
-              cx="2"
-              cy="2"
-              stroke="rgba(49,208,198,1)"
-              r="2"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-3,-3)"
+              cx="3"
+              cy="3"
               stroke-width="1"
+              r="3"
+              stroke="rgba(0,0,0,1)"
+              stroke-opacity="0.65"
             />
           </g>
           <g transform="matrix(1,0,0,1,0,17.500000)">
             <circle
               id="port-3"
-              fill="rgba(255,255,255,1)"
-              transform="translate(-2,-2)"
-              cx="2"
-              cy="2"
-              stroke="rgba(49,208,198,1)"
-              r="2"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-3,-3)"
+              cx="3"
+              cy="3"
               stroke-width="1"
+              r="3"
+              stroke="rgba(0,0,0,1)"
+              stroke-opacity="0.65"
             />
           </g>
         </g>
@@ -439,11 +451,11 @@
               transform="translate(-22.5,-17.5)"
               cx="22.5"
               cy="17.5"
-              stroke="rgba(23,131,255,1)"
+              stroke-width="12"
+              stroke="rgba(34,126,255,1)"
               rx="22.5"
               ry="17.5"
               stroke-dasharray="0,0"
-              stroke-width="12"
               stroke-opacity="0.25"
               pointer-events="none"
             />
@@ -451,11 +463,12 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <ellipse
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-22.5,-17.5)"
               cx="22.5"
               cy="17.5"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               rx="22.5"
               ry="17.5"
             />
@@ -464,9 +477,9 @@
             <g transform="matrix(1,0,0,1,-38.880001,0)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 78.75999999999999,0 l 0,23 l-78.75999999999999 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="78.75999999999999"
                 height="23"
@@ -475,7 +488,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -490,21 +503,22 @@
           <g
             id="icon"
             fill="none"
-            width="28"
-            height="28"
+            width="20"
+            height="20"
             transform="matrix(1,0,0,1,0,0)"
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
                 href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
-                transform="translate(-14,-14)"
-                width="28"
-                height="28"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
               />
             </g>
           </g>
@@ -521,8 +535,8 @@
               transform="translate(-22.5,-17.5)"
               cx="22.5"
               cy="17.5"
-              stroke="rgba(23,131,255,1)"
               stroke-width="12"
+              stroke="rgba(34,126,255,1)"
               rx="22.5"
               ry="17.5"
               stroke-dasharray="0,0"
@@ -533,61 +547,63 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <ellipse
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,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="2"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,17.500000)">
-            <g transform="matrix(1,0,0,1,-44.520000,0)">
+            <g transform="matrix(1,0,0,1,-53.900002,0)">
               <path
                 id="background"
-                fill="none"
-                d="M 0,0 l 90,0 l 0,23 l-90 0 z"
-                opacity="0.75"
+                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="90"
-                height="23"
+                width="108.80000000000001"
+                height="27"
               />
             </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
-                dy="11.5px"
-                font-size="12"
+                dy="13.5px"
+                font-size="14"
                 text-anchor="middle"
+                font-weight="700"
               >
-                ellipse-select...
+                ellipse-selected
               </text>
             </g>
           </g>
           <g
             id="icon"
             fill="none"
-            width="28"
-            height="28"
+            width="20"
+            height="20"
             transform="matrix(1,0,0,1,0,0)"
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
                 href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
-                transform="translate(-14,-14)"
-                width="28"
-                height="28"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
               />
             </g>
           </g>
@@ -600,61 +616,64 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <ellipse
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,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="2"
+              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,-42.660000,0)">
+            <g transform="matrix(1,0,0,1,-46.680000,0)">
               <path
                 id="background"
-                fill="none"
-                d="M 0,0 l 86.32000000000001,0 l 0,23 l-86.32000000000001 0 z"
-                opacity="0.75"
+                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="86.32000000000001"
+                width="94.36000000000001"
                 height="23"
               />
             </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
                 dy="11.5px"
                 font-size="12"
                 text-anchor="middle"
+                font-weight="700"
               >
-                ellipse-highli...
+                ellipse-highlight
               </text>
             </g>
           </g>
           <g
             id="icon"
             fill="none"
-            width="28"
-            height="28"
+            width="20"
+            height="20"
             transform="matrix(1,0,0,1,0,0)"
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
                 href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
-                transform="translate(-14,-14)"
-                width="28"
-                height="28"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
               />
             </g>
           </g>
@@ -667,23 +686,24 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <ellipse
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,255,1)"
               transform="translate(-22.5,-17.5)"
               cx="22.5"
               cy="17.5"
-              stroke="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               rx="22.5"
               ry="17.5"
-              opacity="0.2"
+              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="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 89.08,0 l 0,23 l-89.08 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="89.08"
                 height="23"
@@ -692,13 +712,14 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
                 dy="11.5px"
                 font-size="12"
                 text-anchor="middle"
+                opacity="0.25"
               >
                 ellipse-inactive
               </text>
@@ -707,21 +728,91 @@
           <g
             id="icon"
             fill="none"
-            width="28"
-            height="28"
+            width="20"
+            height="20"
+            transform="matrix(1,0,0,1,0,0)"
+          >
+            <g transform="matrix(1,0,0,1,0,0)">
+              <image
+                id="icon"
+                fill="rgba(255,255,255,1)"
+                preserveAspectRatio="none"
+                x="0"
+                y="0"
+                href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
+                opacity="0.25"
+              />
+            </g>
+          </g>
+        </g>
+        <g
+          id="ellipse-disabled"
+          fill="none"
+          transform="matrix(1,0,0,1,416.666656,416.666656)"
+        >
+          <g transform="matrix(1,0,0,1,0,0)">
+            <ellipse
+              id="key"
+              fill="rgba(240,240,240,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,-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"
+                fill="rgba(0,0,0,0.8509803921568627)"
+                dominant-baseline="central"
+                paint-order="stroke"
+                dx="0.5"
+                dy="11.5px"
+                font-size="12"
+                text-anchor="middle"
+              >
+                ellipse-disabled
+              </text>
+            </g>
+          </g>
+          <g
+            id="icon"
+            fill="none"
+            width="20"
+            height="20"
             transform="matrix(1,0,0,1,0,0)"
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
                 href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
-                transform="translate(-14,-14)"
-                width="28"
-                height="28"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
               />
             </g>
           </g>
diff --git a/packages/g6/__tests__/integration/snapshots/static/node-image.svg b/packages/g6/__tests__/integration/snapshots/static/node-image.svg
index 99d7439a8c2..2926ea392c6 100644
--- a/packages/g6/__tests__/integration/snapshots/static/node-image.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/node-image.svg
@@ -20,13 +20,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <image
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,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="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
             />
@@ -35,9 +36,9 @@
             <g transform="matrix(1,0,0,1,-17.400000,0)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 35.8,0 l 0,23 l-35.8 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="35.8"
                 height="23"
@@ -46,7 +47,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -70,25 +71,26 @@
               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(23,131,255,1)"
+              stroke="rgba(34,126,255,1)"
             />
           </g>
           <g transform="matrix(1,0,0,1,0,0)">
             <image
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,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="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
             />
@@ -97,9 +99,9 @@
             <g transform="matrix(1,0,0,1,-32.400002,0)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 65.8,0 l 0,23 l-65.8 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="65.8"
                 height="23"
@@ -108,7 +110,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -129,33 +131,34 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <image
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,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="rgba(139,155,175,1)"
+              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,-36.779999,0)">
+            <g transform="matrix(1,0,0,1,-41.639999,0)">
               <path
                 id="background"
-                fill="none"
-                d="M 0,0 l 74.56,0 l 0,23 l-74.56 0 z"
-                opacity="0.75"
+                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="74.56"
+                width="84.28"
                 height="23"
               />
             </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -163,7 +166,7 @@
                 font-size="12"
                 text-anchor="middle"
               >
-                image-bad...
+                image-badges
               </text>
             </g>
           </g>
@@ -172,7 +175,7 @@
               <g transform="matrix(1,0,0,1,-4,-1)">
                 <path
                   id="background"
-                  fill="rgba(130,145,178,1)"
+                  fill="rgba(126,146,181,1)"
                   d="M 7.26,0 l 0,0 a 7.26,7.26,0,0,1,7.26,7.26 l 0,4.48 a 7.26,7.26,0,0,1,-7.26,7.26 l 0,0 a 7.26,7.26,0,0,1,-7.26,-7.26 l 0,-4.48 a 7.26,7.26,0,0,1,7.26,-7.26 z"
                   stroke-width="0"
                   width="14.52"
@@ -200,7 +203,7 @@
               <g transform="matrix(1,0,0,1,-4,-9.500000)">
                 <path
                   id="background"
-                  fill="rgba(230,108,91,1)"
+                  fill="rgba(248,98,84,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"
@@ -227,7 +230,7 @@
               <g transform="matrix(1,0,0,1,-4,-18)">
                 <path
                   id="background"
-                  fill="rgba(229,185,94,1)"
+                  fill="rgba(237,183,75,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"
@@ -259,13 +262,14 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <image
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,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="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
             />
@@ -274,9 +278,9 @@
             <g transform="matrix(1,0,0,1,-35.459999,0)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 71.92,0 l 0,23 l-71.92 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="71.92"
                 height="23"
@@ -285,7 +289,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -300,49 +304,53 @@
           <g transform="matrix(1,0,0,1,-20,0)">
             <circle
               id="port-0"
-              fill="rgba(255,255,255,1)"
-              transform="translate(-2,-2)"
-              cx="2"
-              cy="2"
-              stroke="rgba(49,208,198,1)"
-              r="2"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-3,-3)"
+              cx="3"
+              cy="3"
               stroke-width="1"
+              r="3"
+              stroke="rgba(0,0,0,1)"
+              stroke-opacity="0.65"
             />
           </g>
           <g transform="matrix(1,0,0,1,20,0)">
             <circle
               id="port-1"
-              fill="rgba(255,255,255,1)"
-              transform="translate(-2,-2)"
-              cx="2"
-              cy="2"
-              stroke="rgba(49,208,198,1)"
-              r="2"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-3,-3)"
+              cx="3"
+              cy="3"
               stroke-width="1"
+              r="3"
+              stroke="rgba(0,0,0,1)"
+              stroke-opacity="0.65"
             />
           </g>
           <g transform="matrix(1,0,0,1,0,-20)">
             <circle
               id="port-2"
-              fill="rgba(255,255,255,1)"
-              transform="translate(-2,-2)"
-              cx="2"
-              cy="2"
-              stroke="rgba(49,208,198,1)"
-              r="2"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-3,-3)"
+              cx="3"
+              cy="3"
               stroke-width="1"
+              r="3"
+              stroke="rgba(0,0,0,1)"
+              stroke-opacity="0.65"
             />
           </g>
           <g transform="matrix(1,0,0,1,0,20)">
             <circle
               id="port-3"
-              fill="rgba(255,255,255,1)"
-              transform="translate(-2,-2)"
-              cx="2"
-              cy="2"
-              stroke="rgba(49,208,198,1)"
-              r="2"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-3,-3)"
+              cx="3"
+              cy="3"
               stroke-width="1"
+              r="3"
+              stroke="rgba(0,0,0,1)"
+              stroke-opacity="0.65"
             />
           </g>
         </g>
@@ -353,25 +361,26 @@
               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(23,131,255,1)"
+              stroke="rgba(34,126,255,1)"
             />
           </g>
           <g transform="matrix(1,0,0,1,0,0)">
             <image
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,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="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
             />
@@ -380,9 +389,9 @@
             <g transform="matrix(1,0,0,1,-37.680000,0)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 76.35999999999999,0 l 0,23 l-76.35999999999999 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="76.35999999999999"
                 height="23"
@@ -391,7 +400,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -415,45 +424,46 @@
               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(23,131,255,1)"
+              stroke="rgba(34,126,255,1)"
             />
           </g>
           <g transform="matrix(1,0,0,1,0,0)">
             <image
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,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="rgba(139,155,175,1)"
+              stroke-width="3"
+              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,-39.830002,0)">
+            <g transform="matrix(1,0,0,1,-52.500000,0)">
               <path
                 id="background"
-                fill="none"
-                d="M 0,0 l 80,0 l 0,27 l-80 0 z"
-                opacity="0.75"
+                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="80"
+                width="106"
                 height="27"
               />
             </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -462,7 +472,7 @@
                 text-anchor="middle"
                 font-weight="700"
               >
-                image-sel...
+                image-selected
               </text>
             </g>
           </g>
@@ -475,33 +485,35 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <image
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,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="rgba(139,155,175,1)"
+              stroke-width="3"
+              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
+              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.900002,0)">
+            <g transform="matrix(1,0,0,1,-45.480000,0)">
               <path
                 id="background"
-                fill="none"
-                d="M 0,0 l 80,0 l 0,23 l-80 0 z"
-                opacity="0.75"
+                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="80"
+                width="91.96000000000001"
                 height="23"
               />
             </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -510,7 +522,7 @@
                 text-anchor="middle"
                 font-weight="700"
               >
-                image-highl...
+                image-highlight
               </text>
             </g>
           </g>
@@ -523,34 +535,85 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <image
               id="key"
-              fill="rgba(248,248,248,1)"
+              fill="rgba(34,126,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"
+                fill="rgba(0,0,0,0.8509803921568627)"
+                dominant-baseline="central"
+                paint-order="stroke"
+                dx="0.5"
+                dy="11.5px"
+                font-size="12"
+                text-anchor="middle"
+                opacity="0.25"
+              >
+                image-inactive
+              </text>
+            </g>
+          </g>
+        </g>
+        <g
+          id="image-disabled"
+          fill="none"
+          transform="matrix(1,0,0,1,416.666656,416.666656)"
+        >
+          <g transform="matrix(1,0,0,1,0,0)">
+            <image
+              id="key"
+              fill="rgba(240,240,240,1)"
               preserveAspectRatio="none"
               x="0"
               y="0"
               href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
               transform="translate(-20,-20)"
-              stroke="rgba(139,155,175,1)"
+              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,-37.799999,0)">
+            <g transform="matrix(1,0,0,1,-44.820000,0)">
               <path
                 id="background"
-                fill="none"
-                d="M 0,0 l 76.6,0 l 0,23 l-76.6 0 z"
-                opacity="0.75"
+                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="76.6"
+                width="90.64"
                 height="23"
               />
             </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -558,7 +621,7 @@
                 font-size="12"
                 text-anchor="middle"
               >
-                image-inac...
+                image-disabled
               </text>
             </g>
           </g>
diff --git a/packages/g6/__tests__/integration/snapshots/static/node-rect.svg b/packages/g6/__tests__/integration/snapshots/static/node-rect.svg
index 500cf2bba2e..0558c37281c 100644
--- a/packages/g6/__tests__/integration/snapshots/static/node-rect.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/node-rect.svg
@@ -20,10 +20,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,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="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
             />
@@ -32,9 +33,9 @@
             <g transform="matrix(1,0,0,1,-11.520000,0)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 24.04,0 l 0,23 l-24.04 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="24.04"
                 height="23"
@@ -43,7 +44,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -58,21 +59,22 @@
           <g
             id="icon"
             fill="none"
-            width="30"
-            height="30"
+            width="20"
+            height="20"
             transform="matrix(1,0,0,1,0,0)"
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
                 href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
-                transform="translate(-15,-15)"
-                width="30"
-                height="30"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
               />
             </g>
           </g>
@@ -84,11 +86,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="rgba(23,131,255,1)"
+              stroke-width="12"
+              stroke="rgba(34,126,255,1)"
               width="40"
               height="40"
               stroke-dasharray="0,0"
-              stroke-width="12"
               stroke-opacity="0.25"
               pointer-events="none"
             />
@@ -96,10 +98,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,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="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
             />
@@ -108,9 +111,9 @@
             <g transform="matrix(1,0,0,1,-26.520000,0)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 54.04,0 l 0,23 l-54.04 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="54.04"
                 height="23"
@@ -119,7 +122,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -134,21 +137,22 @@
           <g
             id="icon"
             fill="none"
-            width="30"
-            height="30"
+            width="20"
+            height="20"
             transform="matrix(1,0,0,1,0,0)"
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
                 href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
-                transform="translate(-15,-15)"
-                width="30"
-                height="30"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
               />
             </g>
           </g>
@@ -161,10 +165,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,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="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
             />
@@ -173,9 +178,9 @@
             <g transform="matrix(1,0,0,1,-35.759998,0)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 72.52,0 l 0,23 l-72.52 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="72.52"
                 height="23"
@@ -184,7 +189,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -199,21 +204,22 @@
           <g
             id="icon"
             fill="none"
-            width="30"
-            height="30"
+            width="20"
+            height="20"
             transform="matrix(1,0,0,1,0,0)"
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
                 href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
-                transform="translate(-15,-15)"
-                width="30"
-                height="30"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
               />
             </g>
           </g>
@@ -222,7 +228,7 @@
               <g transform="matrix(1,0,0,1,-4,-1)">
                 <path
                   id="background"
-                  fill="rgba(130,145,178,1)"
+                  fill="rgba(126,146,181,1)"
                   d="M 7.26,0 l 0,0 a 7.26,7.26,0,0,1,7.26,7.26 l 0,4.48 a 7.26,7.26,0,0,1,-7.26,7.26 l 0,0 a 7.26,7.26,0,0,1,-7.26,-7.26 l 0,-4.48 a 7.26,7.26,0,0,1,7.26,-7.26 z"
                   stroke-width="0"
                   width="14.52"
@@ -250,7 +256,7 @@
               <g transform="matrix(1,0,0,1,-4,-9.500000)">
                 <path
                   id="background"
-                  fill="rgba(230,108,91,1)"
+                  fill="rgba(248,98,84,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"
@@ -277,7 +283,7 @@
               <g transform="matrix(1,0,0,1,-4,-18)">
                 <path
                   id="background"
-                  fill="rgba(229,185,94,1)"
+                  fill="rgba(237,183,75,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"
@@ -309,10 +315,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,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="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
             />
@@ -321,9 +328,9 @@
             <g transform="matrix(1,0,0,1,-29.580000,0)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 60.16,0 l 0,23 l-60.16 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="60.16"
                 height="23"
@@ -332,7 +339,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -347,70 +354,75 @@
           <g
             id="icon"
             fill="none"
-            width="30"
-            height="30"
+            width="20"
+            height="20"
             transform="matrix(1,0,0,1,0,0)"
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
                 href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
-                transform="translate(-15,-15)"
-                width="30"
-                height="30"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
               />
             </g>
           </g>
           <g transform="matrix(1,0,0,1,-20,0)">
             <circle
               id="port-0"
-              fill="rgba(255,255,255,1)"
-              transform="translate(-2,-2)"
-              cx="2"
-              cy="2"
-              stroke="rgba(49,208,198,1)"
-              r="2"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-3,-3)"
+              cx="3"
+              cy="3"
               stroke-width="1"
+              r="3"
+              stroke="rgba(0,0,0,1)"
+              stroke-opacity="0.65"
             />
           </g>
           <g transform="matrix(1,0,0,1,20,0)">
             <circle
               id="port-1"
-              fill="rgba(255,255,255,1)"
-              transform="translate(-2,-2)"
-              cx="2"
-              cy="2"
-              stroke="rgba(49,208,198,1)"
-              r="2"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-3,-3)"
+              cx="3"
+              cy="3"
               stroke-width="1"
+              r="3"
+              stroke="rgba(0,0,0,1)"
+              stroke-opacity="0.65"
             />
           </g>
           <g transform="matrix(1,0,0,1,0,-20)">
             <circle
               id="port-2"
-              fill="rgba(255,255,255,1)"
-              transform="translate(-2,-2)"
-              cx="2"
-              cy="2"
-              stroke="rgba(49,208,198,1)"
-              r="2"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-3,-3)"
+              cx="3"
+              cy="3"
               stroke-width="1"
+              r="3"
+              stroke="rgba(0,0,0,1)"
+              stroke-opacity="0.65"
             />
           </g>
           <g transform="matrix(1,0,0,1,0,20)">
             <circle
               id="port-3"
-              fill="rgba(255,255,255,1)"
-              transform="translate(-2,-2)"
-              cx="2"
-              cy="2"
-              stroke="rgba(49,208,198,1)"
-              r="2"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-3,-3)"
+              cx="3"
+              cy="3"
               stroke-width="1"
+              r="3"
+              stroke="rgba(0,0,0,1)"
+              stroke-opacity="0.65"
             />
           </g>
         </g>
@@ -421,11 +433,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="rgba(23,131,255,1)"
+              stroke-width="12"
+              stroke="rgba(34,126,255,1)"
               width="40"
               height="40"
               stroke-dasharray="0,0"
-              stroke-width="12"
               stroke-opacity="0.25"
               pointer-events="none"
             />
@@ -433,10 +445,11 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,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="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
             />
@@ -445,9 +458,9 @@
             <g transform="matrix(1,0,0,1,-31.799999,0)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 64.6,0 l 0,23 l-64.6 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="64.6"
                 height="23"
@@ -456,7 +469,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -471,21 +484,22 @@
           <g
             id="icon"
             fill="none"
-            width="30"
-            height="30"
+            width="20"
+            height="20"
             transform="matrix(1,0,0,1,0,0)"
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
                 href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
-                transform="translate(-15,-15)"
-                width="30"
-                height="30"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
               />
             </g>
           </g>
@@ -501,8 +515,8 @@
               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="rgba(23,131,255,1)"
               stroke-width="12"
+              stroke="rgba(34,126,255,1)"
               width="40"
               height="40"
               stroke-dasharray="0,0"
@@ -513,37 +527,38 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,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="2"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-39.119999,0)">
+            <g transform="matrix(1,0,0,1,-45.639999,0)">
               <path
                 id="background"
-                fill="none"
-                d="M 0,0 l 79.24,0 l 0,23 l-79.24 0 z"
-                opacity="0.75"
+                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="79.24"
-                height="23"
+                width="92.28"
+                height="27"
               />
             </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
-                dy="11.5px"
-                font-size="12"
+                dy="13.5px"
+                font-size="14"
                 text-anchor="middle"
+                font-weight="700"
               >
                 rect-selected
               </text>
@@ -552,21 +567,22 @@
           <g
             id="icon"
             fill="none"
-            width="30"
-            height="30"
+            width="20"
+            height="20"
             transform="matrix(1,0,0,1,0,0)"
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
                 href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
-                transform="translate(-15,-15)"
-                width="30"
-                height="30"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
               />
             </g>
           </g>
@@ -579,37 +595,39 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,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="2"
+              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="none"
-                d="M 0,0 l 80,0 l 0,23 l-80 0 z"
-                opacity="0.75"
+                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"
+                width="80.2"
                 height="23"
               />
             </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
                 dy="11.5px"
                 font-size="12"
                 text-anchor="middle"
+                font-weight="700"
               >
                 rect-highlight
               </text>
@@ -618,21 +636,22 @@
           <g
             id="icon"
             fill="none"
-            width="30"
-            height="30"
+            width="20"
+            height="20"
             transform="matrix(1,0,0,1,0,0)"
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
                 href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
-                transform="translate(-15,-15)"
-                width="30"
-                height="30"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
               />
             </g>
           </g>
@@ -645,22 +664,23 @@
           <g transform="matrix(1,0,0,1,0,0)">
             <path
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,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="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
               width="40"
               height="40"
-              opacity="0.2"
+              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="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 74.91999999999999,0 l 0,23 l-74.91999999999999 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="74.91999999999999"
                 height="23"
@@ -669,13 +689,14 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
                 dy="11.5px"
                 font-size="12"
                 text-anchor="middle"
+                opacity="0.25"
               >
                 rect-inactive
               </text>
@@ -684,21 +705,90 @@
           <g
             id="icon"
             fill="none"
-            width="30"
-            height="30"
+            width="20"
+            height="20"
+            transform="matrix(1,0,0,1,0,0)"
+          >
+            <g transform="matrix(1,0,0,1,0,0)">
+              <image
+                id="icon"
+                fill="rgba(255,255,255,1)"
+                preserveAspectRatio="none"
+                x="0"
+                y="0"
+                href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
+                opacity="0.25"
+              />
+            </g>
+          </g>
+        </g>
+        <g
+          id="rect-disabled"
+          fill="none"
+          transform="matrix(1,0,0,1,416.666656,416.666656)"
+        >
+          <g transform="matrix(1,0,0,1,0,0)">
+            <path
+              id="key"
+              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"
+                fill="rgba(0,0,0,0.8509803921568627)"
+                dominant-baseline="central"
+                paint-order="stroke"
+                dx="0.5"
+                dy="11.5px"
+                font-size="12"
+                text-anchor="middle"
+              >
+                rect-disabled
+              </text>
+            </g>
+          </g>
+          <g
+            id="icon"
+            fill="none"
+            width="20"
+            height="20"
             transform="matrix(1,0,0,1,0,0)"
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
                 href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
-                transform="translate(-15,-15)"
-                width="30"
-                height="30"
+                transform="translate(-10,-10)"
+                width="20"
+                height="20"
+                font-size="16"
               />
             </g>
           </g>
diff --git a/packages/g6/__tests__/integration/snapshots/static/node-star.svg b/packages/g6/__tests__/integration/snapshots/static/node-star.svg
index 3468aa40227..9e6b8a45852 100644
--- a/packages/g6/__tests__/integration/snapshots/static/node-star.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/node-star.svg
@@ -20,9 +20,10 @@
           <g transform="matrix(1,0,0,1,-19.021130,-20)">
             <polygon
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,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="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g
@@ -33,8 +34,9 @@
             <g transform="matrix(1,0,0,1,-11.220000,0)">
               <path
                 id="background"
-                fill="none"
+                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"
@@ -43,7 +45,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -65,7 +67,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
@@ -73,6 +75,7 @@
                 transform="translate(-6,-6)"
                 width="12"
                 height="12"
+                font-size="16"
               />
             </g>
           </g>
@@ -83,9 +86,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="rgba(23,131,255,1)"
-              stroke-dasharray="0,0"
               stroke-width="12"
+              stroke="rgba(34,126,255,1)"
+              stroke-dasharray="0,0"
               stroke-opacity="0.25"
               pointer-events="none"
             />
@@ -93,9 +96,10 @@
           <g transform="matrix(1,0,0,1,-19.021130,-20)">
             <polygon
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,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="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g
@@ -106,8 +110,9 @@
             <g transform="matrix(1,0,0,1,-26.219999,0)">
               <path
                 id="background"
-                fill="none"
+                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"
@@ -116,7 +121,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -138,7 +143,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
@@ -146,6 +151,7 @@
                 transform="translate(-6,-6)"
                 width="12"
                 height="12"
+                font-size="16"
               />
             </g>
           </g>
@@ -158,9 +164,10 @@
           <g transform="matrix(1,0,0,1,-19.021130,-20)">
             <polygon
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,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="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g
@@ -171,8 +178,9 @@
             <g transform="matrix(1,0,0,1,-35.459999,0)">
               <path
                 id="background"
-                fill="none"
+                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"
@@ -181,7 +189,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -203,7 +211,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
@@ -211,6 +219,7 @@
                 transform="translate(-6,-6)"
                 width="12"
                 height="12"
+                font-size="16"
               />
             </g>
           </g>
@@ -219,7 +228,7 @@
               <g transform="matrix(1,0,0,1,-4,-1)">
                 <path
                   id="background"
-                  fill="rgba(130,145,178,1)"
+                  fill="rgba(126,146,181,1)"
                   d="M 7.26,0 l 0,0 a 7.26,7.26,0,0,1,7.26,7.26 l 0,4.48 a 7.26,7.26,0,0,1,-7.26,7.26 l 0,0 a 7.26,7.26,0,0,1,-7.26,-7.26 l 0,-4.48 a 7.26,7.26,0,0,1,7.26,-7.26 z"
                   stroke-width="0"
                   width="14.52"
@@ -251,7 +260,7 @@
               <g transform="matrix(1,0,0,1,-4,-9.500000)">
                 <path
                   id="background"
-                  fill="rgba(230,108,91,1)"
+                  fill="rgba(248,98,84,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"
@@ -282,7 +291,7 @@
               <g transform="matrix(1,0,0,1,-4,-18)">
                 <path
                   id="background"
-                  fill="rgba(229,185,94,1)"
+                  fill="rgba(237,183,75,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"
@@ -314,9 +323,10 @@
           <g transform="matrix(1,0,0,1,-19.021130,-20)">
             <polygon
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,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="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g
@@ -327,8 +337,9 @@
             <g transform="matrix(1,0,0,1,-29.280001,0)">
               <path
                 id="background"
-                fill="none"
+                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"
@@ -337,7 +348,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -359,7 +370,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
@@ -367,55 +378,60 @@
                 transform="translate(-6,-6)"
                 width="12"
                 height="12"
+                font-size="16"
               />
             </g>
           </g>
           <g transform="matrix(1,0,0,1,-19.021130,-6.180340)">
             <circle
               id="port-0"
-              fill="rgba(255,255,255,1)"
-              transform="translate(-2,-2)"
-              cx="2"
-              cy="2"
-              stroke="rgba(49,208,198,1)"
-              r="2"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-3,-3)"
+              cx="3"
+              cy="3"
               stroke-width="1"
+              r="3"
+              stroke="rgba(0,0,0,1)"
+              stroke-opacity="0.65"
             />
           </g>
           <g transform="matrix(1,0,0,1,19.021130,-6.180340)">
             <circle
               id="port-1"
-              fill="rgba(255,255,255,1)"
-              transform="translate(-2,-2)"
-              cx="2"
-              cy="2"
-              stroke="rgba(49,208,198,1)"
-              r="2"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-3,-3)"
+              cx="3"
+              cy="3"
               stroke-width="1"
+              r="3"
+              stroke="rgba(0,0,0,1)"
+              stroke-opacity="0.65"
             />
           </g>
           <g transform="matrix(1,0,0,1,0,-20)">
             <circle
               id="port-2"
-              fill="rgba(255,255,255,1)"
-              transform="translate(-2,-2)"
-              cx="2"
-              cy="2"
-              stroke="rgba(49,208,198,1)"
-              r="2"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-3,-3)"
+              cx="3"
+              cy="3"
               stroke-width="1"
+              r="3"
+              stroke="rgba(0,0,0,1)"
+              stroke-opacity="0.65"
             />
           </g>
           <g transform="matrix(1,0,0,1,0,7.500000)">
             <circle
               id="port-3"
-              fill="rgba(255,255,255,1)"
-              transform="translate(-2,-2)"
-              cx="2"
-              cy="2"
-              stroke="rgba(49,208,198,1)"
-              r="2"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-3,-3)"
+              cx="3"
+              cy="3"
               stroke-width="1"
+              r="3"
+              stroke="rgba(0,0,0,1)"
+              stroke-opacity="0.65"
             />
           </g>
         </g>
@@ -425,9 +441,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="rgba(23,131,255,1)"
-              stroke-dasharray="0,0"
               stroke-width="12"
+              stroke="rgba(34,126,255,1)"
+              stroke-dasharray="0,0"
               stroke-opacity="0.25"
               pointer-events="none"
             />
@@ -435,9 +451,10 @@
           <g transform="matrix(1,0,0,1,-19.021130,-20)">
             <polygon
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,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="rgba(139,155,175,1)"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
             />
           </g>
           <g
@@ -448,9 +465,9 @@
             <g transform="matrix(1,0,0,1,-31.500000,0)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 63.99999999999999,0 l 0,23 l-63.99999999999999 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="63.99999999999999"
                 height="23"
@@ -459,7 +476,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -481,7 +498,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
@@ -489,6 +506,7 @@
                 transform="translate(-6,-6)"
                 width="12"
                 height="12"
+                font-size="16"
               />
             </g>
           </g>
@@ -503,8 +521,8 @@
               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="rgba(23,131,255,1)"
               stroke-width="12"
+              stroke="rgba(34,126,255,1)"
               stroke-dasharray="0,0"
               stroke-opacity="0.25"
               pointer-events="none"
@@ -513,10 +531,10 @@
           <g transform="matrix(1,0,0,1,-19.021130,-20)">
             <polygon
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,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)"
-              stroke-width="2"
             />
           </g>
           <g
@@ -524,29 +542,30 @@
             fill="none"
             transform="matrix(1,0,0,1,0.000001,16.180340)"
           >
-            <g transform="matrix(1,0,0,1,-37.139999,0)">
+            <g transform="matrix(1,0,0,1,-45.290001,0)">
               <path
                 id="background"
-                fill="none"
-                d="M 0,0 l 75.27999999999999,0 l 0,23 l-75.27999999999999 0 z"
-                opacity="0.75"
+                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="75.27999999999999"
-                height="23"
+                width="91.57999999999998"
+                height="27"
               />
             </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
-                dy="11.5px"
-                font-size="12"
+                dy="13.5px"
+                font-size="14"
                 text-anchor="middle"
+                font-weight="700"
               >
-                star-select...
+                star-selected
               </text>
             </g>
           </g>
@@ -560,7 +579,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
@@ -568,6 +587,7 @@
                 transform="translate(-6,-6)"
                 width="12"
                 height="12"
+                font-size="16"
               />
             </g>
           </g>
@@ -580,10 +600,11 @@
           <g transform="matrix(1,0,0,1,-19.021130,-20)">
             <polygon
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,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)"
-              stroke-width="2"
+              stroke-opacity="0.85"
             />
           </g>
           <g
@@ -591,29 +612,30 @@
             fill="none"
             transform="matrix(1,0,0,1,0.000001,16.180340)"
           >
-            <g transform="matrix(1,0,0,1,-35.279999,0)">
+            <g transform="matrix(1,0,0,1,-39.299999,0)">
               <path
                 id="background"
-                fill="none"
-                d="M 0,0 l 71.55999999999999,0 l 0,23 l-71.55999999999999 0 z"
-                opacity="0.75"
+                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="71.55999999999999"
+                width="79.6"
                 height="23"
               />
             </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
                 dy="11.5px"
                 font-size="12"
                 text-anchor="middle"
+                font-weight="700"
               >
-                star-highli...
+                star-highlight
               </text>
             </g>
           </g>
@@ -627,7 +649,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
@@ -635,6 +657,7 @@
                 transform="translate(-6,-6)"
                 width="12"
                 height="12"
+                font-size="16"
               />
             </g>
           </g>
@@ -647,10 +670,11 @@
           <g transform="matrix(1,0,0,1,-19.021130,-20)">
             <polygon
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,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="rgba(139,155,175,1)"
-              opacity="0.2"
+              stroke-width="0"
+              stroke="rgba(0,0,0,1)"
+              opacity="0.25"
             />
           </g>
           <g
@@ -661,9 +685,9 @@
             <g transform="matrix(1,0,0,1,-36.660000,0)">
               <path
                 id="background"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 74.32,0 l 0,23 l-74.32 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="74.32"
                 height="23"
@@ -672,13 +696,14 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
                 dy="11.5px"
                 font-size="12"
                 text-anchor="middle"
+                opacity="0.25"
               >
                 star-inactive
               </text>
@@ -694,7 +719,76 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
+                preserveAspectRatio="none"
+                x="0"
+                y="0"
+                href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
+                transform="translate(-6,-6)"
+                width="12"
+                height="12"
+                font-size="16"
+                opacity="0.25"
+              />
+            </g>
+          </g>
+        </g>
+        <g
+          id="star-disabled"
+          fill="none"
+          transform="matrix(1,0,0,1,416.666656,416.666656)"
+        >
+          <g transform="matrix(1,0,0,1,-19.021130,-20)">
+            <polygon
+              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
+            id="label"
+            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"
+                fill="rgba(0,0,0,0.8509803921568627)"
+                dominant-baseline="central"
+                paint-order="stroke"
+                dx="0.5"
+                dy="11.5px"
+                font-size="12"
+                text-anchor="middle"
+              >
+                star-disabled
+              </text>
+            </g>
+          </g>
+          <g
+            id="icon"
+            fill="none"
+            width="12"
+            height="12"
+            transform="matrix(1,0,0,1,0.000001,-1.909830)"
+          >
+            <g transform="matrix(1,0,0,1,0,0)">
+              <image
+                id="icon"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
@@ -702,6 +796,7 @@
                 transform="translate(-6,-6)"
                 width="12"
                 height="12"
+                font-size="16"
               />
             </g>
           </g>
diff --git a/packages/g6/__tests__/integration/snapshots/static/node-triangle.svg b/packages/g6/__tests__/integration/snapshots/static/node-triangle.svg
index 4f243f4e51c..6c34cf6b4c7 100644
--- a/packages/g6/__tests__/integration/snapshots/static/node-triangle.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/node-triangle.svg
@@ -20,18 +20,19 @@
           <g transform="matrix(1,0,0,1,-20,-20)">
             <polygon
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,255,1)"
               points="0,40 40,40 20,0"
-              stroke="rgba(139,155,175,1)"
+              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="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 44.8,0 l 0,23 l-44.8 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="44.8"
                 height="23"
@@ -40,7 +41,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -62,7 +63,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
@@ -70,6 +71,7 @@
                 transform="translate(-9.888543819998317,-9.888543819998317)"
                 width="19.777087639996633"
                 height="19.777087639996633"
+                font-size="16"
               />
             </g>
           </g>
@@ -84,9 +86,9 @@
               id="halo"
               fill="none"
               points="0,40 40,40 20,0"
-              stroke="rgba(23,131,255,1)"
-              stroke-dasharray="0,0"
               stroke-width="12"
+              stroke="rgba(34,126,255,1)"
+              stroke-dasharray="0,0"
               stroke-opacity="0.25"
               pointer-events="none"
             />
@@ -94,18 +96,19 @@
           <g transform="matrix(1,0,0,1,-20,-20)">
             <polygon
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,255,1)"
               points="0,40 40,40 20,0"
-              stroke="rgba(139,155,175,1)"
+              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="none"
+                fill="rgba(255,255,255,1)"
                 d="M 0,0 l 74.8,0 l 0,23 l-74.8 0 z"
-                opacity="0.75"
+                opacity="0.5"
                 stroke-width="0"
                 width="74.8"
                 height="23"
@@ -114,7 +117,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -136,7 +139,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
@@ -144,6 +147,7 @@
                 transform="translate(-9.888543819998317,-9.888543819998317)"
                 width="19.777087639996633"
                 height="19.777087639996633"
+                font-size="16"
               />
             </g>
           </g>
@@ -156,27 +160,28 @@
           <g transform="matrix(1,0,0,1,-20,-20)">
             <polygon
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,255,1)"
               points="0,40 40,40 20,0"
-              stroke="rgba(139,155,175,1)"
+              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,-37.500000,0)">
+            <g transform="matrix(1,0,0,1,-46.139999,0)">
               <path
                 id="background"
-                fill="none"
-                d="M 0,0 l 76,0 l 0,23 l-76 0 z"
-                opacity="0.75"
+                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="76"
+                width="93.27999999999999"
                 height="23"
               />
             </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -184,7 +189,7 @@
                 font-size="12"
                 text-anchor="middle"
               >
-                triangle-ba...
+                triangle-badges
               </text>
             </g>
           </g>
@@ -198,7 +203,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
@@ -206,6 +211,7 @@
                 transform="translate(-9.888543819998317,-9.888543819998317)"
                 width="19.777087639996633"
                 height="19.777087639996633"
+                font-size="16"
               />
             </g>
           </g>
@@ -214,7 +220,7 @@
               <g transform="matrix(1,0,0,1,-4,-1)">
                 <path
                   id="background"
-                  fill="rgba(130,145,178,1)"
+                  fill="rgba(126,146,181,1)"
                   d="M 7.26,0 l 0,0 a 7.26,7.26,0,0,1,7.26,7.26 l 0,4.48 a 7.26,7.26,0,0,1,-7.26,7.26 l 0,0 a 7.26,7.26,0,0,1,-7.26,-7.26 l 0,-4.48 a 7.26,7.26,0,0,1,7.26,-7.26 z"
                   stroke-width="0"
                   width="14.52"
@@ -242,7 +248,7 @@
               <g transform="matrix(1,0,0,1,-4,-9.500000)">
                 <path
                   id="background"
-                  fill="rgba(230,108,91,1)"
+                  fill="rgba(248,98,84,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"
@@ -269,7 +275,7 @@
               <g transform="matrix(1,0,0,1,-4,-18)">
                 <path
                   id="background"
-                  fill="rgba(229,185,94,1)"
+                  fill="rgba(237,183,75,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"
@@ -301,27 +307,28 @@
           <g transform="matrix(1,0,0,1,-20,-20)">
             <polygon
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,255,1)"
               points="0,20 40,40 40,0"
-              stroke="rgba(139,155,175,1)"
+              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="none"
-                d="M 0,0 l 80,0 l 0,23 l-80 0 z"
-                opacity="0.75"
+                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"
+                width="80.92"
                 height="23"
               />
             </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -343,7 +350,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
@@ -351,43 +358,47 @@
                 transform="translate(-9.888543819998317,-9.888543819998317)"
                 width="19.777087639996633"
                 height="19.777087639996633"
+                font-size="16"
               />
             </g>
           </g>
           <g transform="matrix(1,0,0,1,-20,0)">
             <circle
               id="port-0"
-              fill="rgba(255,255,255,1)"
-              transform="translate(-2,-2)"
-              cx="2"
-              cy="2"
-              stroke="rgba(49,208,198,1)"
-              r="2"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-3,-3)"
+              cx="3"
+              cy="3"
               stroke-width="1"
+              r="3"
+              stroke="rgba(0,0,0,1)"
+              stroke-opacity="0.65"
             />
           </g>
           <g transform="matrix(1,0,0,1,20,-20)">
             <circle
               id="port-1"
-              fill="rgba(255,255,255,1)"
-              transform="translate(-2,-2)"
-              cx="2"
-              cy="2"
-              stroke="rgba(49,208,198,1)"
-              r="2"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-3,-3)"
+              cx="3"
+              cy="3"
               stroke-width="1"
+              r="3"
+              stroke="rgba(0,0,0,1)"
+              stroke-opacity="0.65"
             />
           </g>
           <g transform="matrix(1,0,0,1,20,20)">
             <circle
               id="port-2"
-              fill="rgba(255,255,255,1)"
-              transform="translate(-2,-2)"
-              cx="2"
-              cy="2"
-              stroke="rgba(49,208,198,1)"
-              r="2"
+              fill="rgba(34,126,255,1)"
+              transform="translate(-3,-3)"
+              cx="3"
+              cy="3"
               stroke-width="1"
+              r="3"
+              stroke="rgba(0,0,0,1)"
+              stroke-opacity="0.65"
             />
           </g>
         </g>
@@ -397,9 +408,9 @@
               id="halo"
               fill="none"
               points="0,40 40,40 20,0"
-              stroke="rgba(23,131,255,1)"
-              stroke-dasharray="0,0"
               stroke-width="12"
+              stroke="rgba(34,126,255,1)"
+              stroke-dasharray="0,0"
               stroke-opacity="0.25"
               pointer-events="none"
             />
@@ -407,27 +418,28 @@
           <g transform="matrix(1,0,0,1,-20,-20)">
             <polygon
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,255,1)"
               points="0,40 40,40 20,0"
-              stroke="rgba(139,155,175,1)"
+              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.419998,0)">
+            <g transform="matrix(1,0,0,1,-42.180000,0)">
               <path
                 id="background"
-                fill="none"
-                d="M 0,0 l 79.83999999999999,0 l 0,23 l-79.83999999999999 0 z"
-                opacity="0.75"
+                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="79.83999999999999"
+                width="85.35999999999999"
                 height="23"
               />
             </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -435,7 +447,7 @@
                 font-size="12"
                 text-anchor="middle"
               >
-                triangle-act...
+                triangle-active
               </text>
             </g>
           </g>
@@ -449,7 +461,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
@@ -457,6 +469,7 @@
                 transform="translate(-9.888543819998317,-9.888543819998317)"
                 width="19.777087639996633"
                 height="19.777087639996633"
+                font-size="16"
               />
             </g>
           </g>
@@ -471,8 +484,8 @@
               id="halo"
               fill="none"
               points="0,40 40,40 20,0"
-              stroke="rgba(23,131,255,1)"
               stroke-width="12"
+              stroke="rgba(34,126,255,1)"
               stroke-dasharray="0,0"
               stroke-opacity="0.25"
               pointer-events="none"
@@ -481,36 +494,37 @@
           <g transform="matrix(1,0,0,1,-20,-20)">
             <polygon
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,255,1)"
               points="0,40 40,40 20,0"
+              stroke-width="3"
               stroke="rgba(0,0,0,1)"
-              stroke-width="2"
             />
           </g>
           <g id="label" fill="none" transform="matrix(1,0,0,1,0,20)">
-            <g transform="matrix(1,0,0,1,-38.639999,0)">
+            <g transform="matrix(1,0,0,1,-57.750000,0)">
               <path
                 id="background"
-                fill="none"
-                d="M 0,0 l 78.27999999999999,0 l 0,23 l-78.27999999999999 0 z"
-                opacity="0.75"
+                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="78.27999999999999"
-                height="23"
+                width="116.5"
+                height="27"
               />
             </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
-                dy="11.5px"
-                font-size="12"
+                dy="13.5px"
+                font-size="14"
                 text-anchor="middle"
+                font-weight="700"
               >
-                triangle-sel...
+                triangle-selected
               </text>
             </g>
           </g>
@@ -524,7 +538,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
@@ -532,6 +546,7 @@
                 transform="translate(-9.888543819998317,-9.888543819998317)"
                 width="19.777087639996633"
                 height="19.777087639996633"
+                font-size="16"
               />
             </g>
           </g>
@@ -544,36 +559,38 @@
           <g transform="matrix(1,0,0,1,-20,-20)">
             <polygon
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,255,1)"
               points="0,40 40,40 20,0"
+              stroke-width="3"
               stroke="rgba(0,0,0,1)"
-              stroke-width="2"
+              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.240002,0)">
+            <g transform="matrix(1,0,0,1,-49.980000,0)">
               <path
                 id="background"
-                fill="none"
-                d="M 0,0 l 79.47999999999999,0 l 0,23 l-79.47999999999999 0 z"
-                opacity="0.75"
+                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="79.47999999999999"
+                width="100.96000000000001"
                 height="23"
               />
             </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
                 dy="11.5px"
                 font-size="12"
                 text-anchor="middle"
+                font-weight="700"
               >
-                triangle-hig...
+                triangle-highlight
               </text>
             </g>
           </g>
@@ -587,7 +604,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
@@ -595,6 +612,7 @@
                 transform="translate(-9.888543819998317,-9.888543819998317)"
                 width="19.777087639996633"
                 height="19.777087639996633"
+                font-size="16"
               />
             </g>
           </g>
@@ -607,36 +625,38 @@
           <g transform="matrix(1,0,0,1,-20,-20)">
             <polygon
               id="key"
-              fill="rgba(23,131,255,1)"
+              fill="rgba(34,126,255,1)"
               points="0,40 40,40 20,0"
-              stroke="rgba(139,155,175,1)"
-              opacity="0.2"
+              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,-38.880001,0)">
+            <g transform="matrix(1,0,0,1,-47.340000,0)">
               <path
                 id="background"
-                fill="none"
-                d="M 0,0 l 78.75999999999999,0 l 0,23 l-78.75999999999999 0 z"
-                opacity="0.75"
+                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="78.75999999999999"
+                width="95.67999999999999"
                 height="23"
               />
             </g>
             <g transform="matrix(1,0,0,1,0,0)">
               <text
                 id="text"
-                fill="rgba(0,0,0,1)"
+                fill="rgba(0,0,0,0.8509803921568627)"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
                 dy="11.5px"
                 font-size="12"
                 text-anchor="middle"
+                opacity="0.25"
               >
-                triangle-ina...
+                triangle-inactive
               </text>
             </g>
           </g>
@@ -650,7 +670,7 @@
             <g transform="matrix(1,0,0,1,0,0)">
               <image
                 id="icon"
-                fill="none"
+                fill="rgba(255,255,255,1)"
                 preserveAspectRatio="none"
                 x="0"
                 y="0"
@@ -658,6 +678,8 @@
                 transform="translate(-9.888543819998317,-9.888543819998317)"
                 width="19.777087639996633"
                 height="19.777087639996633"
+                font-size="16"
+                opacity="0.25"
               />
             </g>
           </g>
diff --git a/packages/g6/__tests__/integration/static.spec.ts b/packages/g6/__tests__/integration/static.spec.ts
index 262c34f6828..4391764bc86 100644
--- a/packages/g6/__tests__/integration/static.spec.ts
+++ b/packages/g6/__tests__/integration/static.spec.ts
@@ -16,6 +16,7 @@ describe('static', () => {
           env: 'test',
           canvas,
           animation: false,
+          theme: 'light',
           expect,
           toMatchSVGSnapshot: async (suffix: string) =>
             await expect(canvas).toMatchSVGSnapshot(`${__dirname}/snapshots/static`, `${name}__${suffix}`),
diff --git a/packages/g6/__tests__/main.ts b/packages/g6/__tests__/main.ts
index dbaa81aecb6..b64193024e3 100644
--- a/packages/g6/__tests__/main.ts
+++ b/packages/g6/__tests__/main.ts
@@ -13,8 +13,18 @@ const casesSelect = document.getElementById('demo-select') as HTMLSelectElement;
 const rendererSelect = document.getElementById('renderer-select') as HTMLSelectElement;
 const animationCheckbox = document.getElementById('animation-checkbox') as HTMLInputElement;
 const reload = document.getElementById('reload-button') as HTMLButtonElement;
+const themeButton = document.getElementById('theme-button') as HTMLButtonElement;
 
 window.onload = () => {
+  function togglePanelTheme() {
+    const theme = document.documentElement.getAttribute('data-theme') as string;
+    if (theme === 'light') {
+      document.documentElement.setAttribute('data-theme', 'dark');
+    } else {
+      document.documentElement.setAttribute('data-theme', 'light');
+    }
+  }
+
   function handleChange() {
     unmountCustomPanel();
     initialize();
@@ -23,7 +33,8 @@ window.onload = () => {
     const animation = animationCheckbox.checked;
     setParamsToSearch({ type, case: testCase, renderer, animation });
     const caseFn = CASES[type][testCase];
-    onchange(caseFn, renderer, animation).then(() => {
+    const theme = document.documentElement.getAttribute('data-theme') as string;
+    onchange(caseFn, renderer, animation, theme).then(() => {
       mountCustomPanel(caseFn.form);
     });
   }
@@ -31,6 +42,10 @@ window.onload = () => {
   casesSelect.onchange = handleChange;
   rendererSelect.onchange = handleChange;
   animationCheckbox.onchange = handleChange;
+  themeButton.onclick = () => {
+    togglePanelTheme();
+    handleChange();
+  };
   reload.onclick = handleChange;
   loadCasesList(casesSelect);
   syncParamsFromSearch();
@@ -51,11 +66,11 @@ function loadCasesList(select: HTMLSelectElement) {
   });
 }
 
-function onchange(testCase: TestCase, renderer: string, animation: boolean) {
+function onchange(testCase: TestCase, renderer: string, animation: boolean, theme: string) {
   const canvas = createGraphCanvas(document.getElementById('container'), 500, 500, renderer);
 
   return canvas.init().then(async () => {
-    const result = await testCase({ canvas, animation, env: 'dev' });
+    const result = await testCase({ canvas, animation, theme, env: 'dev' });
     if (result) setTimer(result.totalDuration);
     else clearTimer();
   });
diff --git a/packages/g6/__tests__/unit/utils/palette.spec.ts b/packages/g6/__tests__/unit/utils/palette.spec.ts
index 5dadc9789eb..d3f97ba75fc 100644
--- a/packages/g6/__tests__/unit/utils/palette.spec.ts
+++ b/packages/g6/__tests__/unit/utils/palette.spec.ts
@@ -1,5 +1,5 @@
 import { register } from '@/src/registry';
-import { assignColorByPalette, parsePalette } from '@/src/utils/palette';
+import { assignColorByPalette, getPaletteColors, parsePalette } from '@/src/utils/palette';
 
 describe('palette', () => {
   it('parsePalette', () => {
@@ -174,4 +174,9 @@ describe('palette', () => {
       'node-11': 'rgb(0, 0, 255)',
     });
   });
+
+  it('getPaletteColors', () => {
+    expect(getPaletteColors('spectral')![0]).toBe('rgb(158, 1, 66)');
+    expect(getPaletteColors(['#f00', '#0f0', '#00f'])).toEqual(['#f00', '#0f0', '#00f']);
+  });
 });
diff --git a/packages/g6/src/elements/nodes/base-node.ts b/packages/g6/src/elements/nodes/base-node.ts
index c23ea22e120..bbfed6c80d5 100644
--- a/packages/g6/src/elements/nodes/base-node.ts
+++ b/packages/g6/src/elements/nodes/base-node.ts
@@ -1,6 +1,7 @@
 import type { BaseStyleProps, DisplayObject, DisplayObjectConfig, Group } from '@antv/g';
 import { Circle as GCircle } from '@antv/g';
 import { deepMix, isEmpty } from '@antv/util';
+import type { CategoricalPalette } from '../../palettes/types';
 import type {
   BadgePosition,
   BaseNodeProps,
@@ -13,6 +14,7 @@ import type {
   PrefixObject,
 } from '../../types';
 import { getPortPosition, getTextStyleByPosition, getXYByPosition } from '../../utils/element';
+import { getPaletteColors } from '../../utils/palette';
 import { getRectIntersectPoint } from '../../utils/point';
 import { omitStyleProps, subObject, subStyleProps } from '../../utils/prefix';
 import { parseSize } from '../../utils/size';
@@ -142,11 +144,16 @@ export abstract class BaseNode<
     });
     if (attributes.badge === false || isEmpty(attributes.badges)) return badgesShapeStyle;
 
-    const badgeStyle = subStyleProps<BadgeStyleProps>(this.getGraphicStyle(attributes), 'badge');
-    const { badges: badgeOptions = [] } = attributes;
+    const { badges: badgeOptions = [], badgePalette, ...restAttributes } = attributes;
+    const colors = getPaletteColors(badgePalette);
+    const badgeStyle = subStyleProps<BadgeStyleProps>(this.getGraphicStyle(restAttributes), 'badge');
 
     badgeOptions.forEach((option, i) => {
-      badgesShapeStyle[i] = { ...badgeStyle, ...this.getBadgeStyle(option) };
+      badgesShapeStyle[i] = {
+        backgroundFill: colors ? colors[i % colors?.length] : undefined,
+        ...badgeStyle,
+        ...this.getBadgeStyle(option),
+      };
     });
 
     return badgesShapeStyle;
@@ -309,6 +316,11 @@ type NodeBadgeStyleProps = BadgeStyleProps & {
 
 type NodeBadgesStyleProps = {
   badges?: NodeBadgeStyleProps[];
+  /**
+   * <zh/> 背景色板
+   * <en/> Background color palette
+   */
+  badgePalette?: string[] | CategoricalPalette;
 } & PrefixObject<BadgeStyleProps, 'badge'>;
 
 export type NodePortStyleProps = Partial<PortStyleProps> & {
diff --git a/packages/g6/src/themes/dark.ts b/packages/g6/src/themes/dark.ts
index 4d0204a1a1e..82d4665c285 100644
--- a/packages/g6/src/themes/dark.ts
+++ b/packages/g6/src/themes/dark.ts
@@ -1,40 +1,183 @@
 import type { Theme } from './types';
 
+const SUBJECT_COLOR = '#1783ff';
+const BG_COLOR = '#000000';
+const TEXT_COLOR = '#ffffffd9';
+
+const NODE_COLOR = SUBJECT_COLOR;
+const NODE_COLOR_DISABLED = '#d0e4ff';
+const NODE_STROKE = '#d0e4ff';
+
+const EDGE_STROKE = '#99add1';
+const EDGE_STROKE_DISABLED = '#969696';
+const EDGE_STROKE_INACTIVE = '#99ADD173';
+
+const COMBO_FILL = '#fdfdfd';
+const COMBO_FILL_DISABLED = '#D0E4FF';
+const COMBO_STROKE = '#99add1';
+const COMBO_STROKE_SELECTED = '#d0e4ff';
+
 export const dark: Theme = {
   node: {
     style: {
-      fill: '#444',
-      stroke: '#f8f8f8',
+      badgeFill: BG_COLOR,
+      badgePalette: ['#7E92B5', '#F86254', '#EDB74B'],
+      fill: NODE_COLOR,
+      halo: false,
+      haloLineWidth: 12,
+      haloStrokeOpacity: 0.45,
+      iconFill: BG_COLOR,
+      iconFontSize: 16,
+      labelBackgroundFill: BG_COLOR,
+      labelBackgroundLineWidth: 0,
+      labelBackgroundOpacity: 0.5,
+      labelBackgroundPadding: [0, 2],
+      labelFill: TEXT_COLOR,
+      labelFontSize: 12,
+      labelMaxLines: 1,
+      labelMaxWidth: '200%',
+      labelOpacity: 0.85,
+      labelTextOverflow: 'ellipsis',
+      labelWordWrap: true,
+      lineWidth: 0,
+      portFill: NODE_COLOR,
+      portLineWidth: 1,
+      portR: 3,
+      portStroke: NODE_STROKE,
+      portStrokeOpacity: 0.65,
+      size: 32,
+      stroke: NODE_STROKE,
+    },
+    state: {
+      selected: {
+        halo: true,
+        labelFontSize: 14,
+        labelFontWeight: 700,
+        lineWidth: 3,
+      },
+      active: {
+        halo: true,
+        haloStrokeOpacity: 0.25,
+      },
+      highlight: {
+        labelFontWeight: 700,
+        lineWidth: 3,
+      },
+      inactive: {
+        iconOpacity: 0.45,
+        labelOpacity: 0.45,
+        opacity: 0.45,
+      },
+      disabled: {
+        fill: NODE_COLOR_DISABLED,
+      },
     },
-    state: {},
     animation: {
       enter: 'fade',
-      update: [{ fields: ['x', 'y', 'fill', 'stroke'] }],
       exit: 'fade',
-      show: 'fade',
       hide: 'fade',
+      show: 'fade',
+      update: [{ fields: ['x', 'y', 'fill', 'stroke'] }],
     },
   },
   edge: {
     style: {
+      halo: false,
+      haloLineWidth: 12,
+      haloStrokeOpacity: 0.25,
+      increasedLineWidthForHitTesting: 2,
+      labelBackgroundFill: BG_COLOR,
+      labelBackgroundLineWidth: 0,
+      labelBackgroundOpacity: 0.75,
+      labelBackgroundPadding: [4, 4, 4, 4],
+      labelFill: TEXT_COLOR,
+      labelFontSize: 12,
+      labelMaxLines: 1,
+      labelMaxWidth: '60%',
+      labelOpacity: 0.85,
+      labelPosition: 'middle',
+      labelTextBaseline: 'middle',
+      labelTextOverflow: 'ellipsis',
+      labelWordWrap: true,
       lineWidth: 1,
-      stroke: '#8b9baf',
+      stroke: EDGE_STROKE,
+    },
+    state: {
+      selected: {
+        halo: true,
+        labelFontSize: 14,
+        labelFontWeight: 700,
+        lineWidth: 2,
+      },
+      active: {
+        halo: true,
+      },
+      highlight: {
+        lineWidth: 2,
+        labelFontWeight: 700,
+      },
+      inactive: {
+        opacity: EDGE_STROKE_INACTIVE,
+      },
+      disabled: {
+        stroke: EDGE_STROKE_DISABLED,
+      },
     },
-    state: {},
     animation: {
       enter: 'fade',
-      update: [{ fields: ['stroke'] }, { fields: ['path'], shape: 'key' }],
       exit: 'fade',
-      show: 'fade',
       hide: 'fade',
+      show: 'fade',
+      update: [{ fields: ['stroke'] }, { fields: ['path'], shape: 'key' }],
     },
   },
   combo: {
     style: {
-      fill: 'rgba(170, 174, 178, 0.2)',
-      stroke: '#aaaeb2',
+      fill: COMBO_FILL,
+      haloLineWidth: 12,
+      haloStrokeOpacity: 0.25,
+      iconContentType: 'childCount',
+      iconFill: COMBO_STROKE,
+      iconFontSize: 12,
+      labelBackgroundFill: BG_COLOR,
+      labelBackgroundLineWidth: 0,
+      labelBackgroundOpacity: 0.75,
+      labelBackgroundPadding: [2, 4, 2, 4],
+      labelFill: '#000',
+      labelFontSize: 12,
+      labelMaxLines: 1,
       lineWidth: 1,
+      padding: [25, 20, 15, 20],
+      size: 10,
+      stroke: COMBO_STROKE,
+    },
+    state: {
+      selected: {
+        lineWidth: 2,
+        stroke: COMBO_STROKE_SELECTED,
+        halo: true,
+        labelFontSize: 14,
+        labelFontWeight: 700,
+      },
+      active: {
+        stroke: COMBO_STROKE_SELECTED,
+        halo: true,
+      },
+      highlight: {
+        lineWidth: 4,
+        stroke: COMBO_STROKE_SELECTED,
+        labelFontWeight: 700,
+      },
+      inactive: {
+        labelOpacity: 0.65,
+      },
+      disabled: {
+        fill: COMBO_FILL_DISABLED,
+        opacity: 0.25,
+        iconFill: COMBO_FILL_DISABLED,
+        iconOpacity: 0.25,
+        labelOpacity: 0.25,
+      },
     },
-    state: {},
   },
 };
diff --git a/packages/g6/src/themes/light.ts b/packages/g6/src/themes/light.ts
index b2822a10d90..fd8676f3af2 100644
--- a/packages/g6/src/themes/light.ts
+++ b/packages/g6/src/themes/light.ts
@@ -1,40 +1,179 @@
 import type { Theme } from './types';
 
+const SUBJECT_COLOR = '#227eff';
+const BG_COLOR = '#fff';
+const TEXT_COLOR = '#000000D9';
+
+const NODE_COLOR = SUBJECT_COLOR;
+const NODE_COLOR_DISABLED = '#f0f0f0';
+const NODE_STROKE = '#000000';
+
+const EDGE_STROKE = '#99add1';
+const EDGE_STROKE_DISABLED = '#d9d9d9';
+const EDGE_STROKE_INACTIVE = '#d2dae9';
+
+const COMBO_FILL = '#fdfdfd';
+const COMBO_FILL_DISABLED = '#f0f0f0';
+const COMBO_STROKE = '#99add1';
+const COMBO_STROKE_DISABLED = '#d9d9d9';
+const COMBO_STROKE_SELECTED = '#1b324f';
+
 export const light: Theme = {
   node: {
     style: {
-      fill: '#f8f8f8',
-      stroke: '#8b9baf',
+      badgeFill: BG_COLOR,
+      badgePalette: ['#7E92B5', '#F86254', '#EDB74B'],
+      fill: NODE_COLOR,
+      halo: false,
+      haloLineWidth: 12,
+      haloStrokeOpacity: 0.25,
+      iconFill: BG_COLOR,
+      iconFontSize: 16,
+      labelBackgroundFill: BG_COLOR,
+      labelBackgroundLineWidth: 0,
+      labelBackgroundOpacity: 0.5,
+      labelBackgroundPadding: [0, 2],
+      labelFill: TEXT_COLOR,
+      labelFontSize: 12,
+      labelMaxLines: 1,
+      labelMaxWidth: '200%',
+      labelTextOverflow: 'ellipsis',
+      labelWordWrap: true,
+      lineWidth: 0,
+      portFill: NODE_COLOR,
+      portLineWidth: 1,
+      portR: 3,
+      portStroke: NODE_STROKE,
+      portStrokeOpacity: 0.65,
+      size: 32,
+      stroke: NODE_STROKE,
+    },
+    state: {
+      selected: {
+        halo: true,
+        labelFontSize: 14,
+        labelFontWeight: 700,
+        lineWidth: 3,
+      },
+      active: {
+        halo: true,
+      },
+      highlight: {
+        labelFontWeight: 700,
+        lineWidth: 3,
+        strokeOpacity: 0.85,
+      },
+      inactive: {
+        iconOpacity: 0.25,
+        labelOpacity: 0.25,
+        opacity: 0.25,
+      },
+      disabled: {
+        fill: NODE_COLOR_DISABLED,
+      },
     },
-    state: {},
     animation: {
       enter: 'fade',
-      update: [{ fields: ['x', 'y', 'fill', 'stroke'] }],
       exit: 'fade',
-      show: 'fade',
       hide: 'fade',
+      show: 'fade',
+      update: [{ fields: ['x', 'y', 'fill', 'stroke'] }],
     },
   },
   edge: {
     style: {
+      halo: false,
+      haloLineWidth: 12,
+      haloStrokeOpacity: 0.25,
+      increasedLineWidthForHitTesting: 2,
+      labelBackgroundFill: BG_COLOR,
+      labelBackgroundLineWidth: 0,
+      labelBackgroundOpacity: 0.75,
+      labelBackgroundPadding: [4, 4, 4, 4],
+      labelFill: TEXT_COLOR,
+      labelFontSize: 12,
+      labelMaxLines: 1,
+      labelMaxWidth: '60%',
+      labelPosition: 'middle',
+      labelTextBaseline: 'middle',
+      labelTextOverflow: 'ellipsis',
+      labelWordWrap: true,
       lineWidth: 1,
-      stroke: '#8b9baf',
+      stroke: EDGE_STROKE,
+    },
+    state: {
+      selected: {
+        halo: true,
+        labelFontSize: 14,
+        labelFontWeight: 700,
+        lineWidth: 2,
+      },
+      active: {
+        halo: true,
+      },
+      highlight: {
+        labelFontWeight: 700,
+        lineWidth: 2,
+      },
+      inactive: {
+        stroke: EDGE_STROKE_INACTIVE,
+      },
+      disabled: {
+        stroke: EDGE_STROKE_DISABLED,
+      },
     },
-    state: {},
     animation: {
       enter: 'fade',
-      update: [{ fields: ['stroke'] }, { fields: ['path'], shape: 'key' }],
       exit: 'fade',
-      show: 'fade',
       hide: 'fade',
+      show: 'fade',
+      update: [{ fields: ['stroke'] }, { fields: ['path'], shape: 'key' }],
     },
   },
   combo: {
     style: {
-      fill: 'rgba(170, 174, 178, 0.2)',
-      stroke: '#aaaeb2',
+      fill: COMBO_FILL,
+      haloLineWidth: 12,
+      haloStrokeOpacity: 0.25,
+      iconContentType: 'childCount',
+      iconFill: COMBO_STROKE,
+      iconFontSize: 12,
+      labelBackgroundFill: BG_COLOR,
+      labelBackgroundLineWidth: 0,
+      labelBackgroundOpacity: 0.75,
+      labelBackgroundPadding: [2, 4, 2, 4],
+      labelFill: '#000',
+      labelFontSize: 12,
+      labelMaxLines: 1,
       lineWidth: 1,
+      padding: [25, 20, 15, 20],
+      size: 10,
+      stroke: COMBO_STROKE,
+    },
+    state: {
+      selected: {
+        halo: true,
+        labelFontSize: 14,
+        labelFontWeight: 700,
+        lineWidth: 4,
+        stroke: COMBO_STROKE_SELECTED,
+      },
+      active: {
+        halo: true,
+      },
+      highlight: {
+        labelFontWeight: 700,
+        lineWidth: 4,
+      },
+      inactive: {
+        opacity: 0.65,
+      },
+      disabled: {
+        fill: COMBO_FILL_DISABLED,
+        labelOpacity: 0.25,
+        opacity: 0.25,
+        stroke: COMBO_STROKE_DISABLED,
+      },
     },
-    state: {},
   },
 };
diff --git a/packages/g6/src/utils/palette.ts b/packages/g6/src/utils/palette.ts
index b414ab21604..a4339daa343 100644
--- a/packages/g6/src/utils/palette.ts
+++ b/packages/g6/src/utils/palette.ts
@@ -1,5 +1,6 @@
 import type { ID } from '@antv/graphlib';
 import { groupBy, isFunction, isNumber, isString } from '@antv/util';
+import type { CategoricalPalette } from '../palettes/types';
 import { getPlugin } from '../registry';
 import type { PaletteOptions, STDPaletteOptions } from '../spec/element/palette';
 import type { ElementData, ElementDatum } from '../types/data';
@@ -99,3 +100,16 @@ export function assignColorByPalette(data: ElementData, palette?: STDPaletteOpti
     );
   }
 }
+
+/**
+ * <zh/> 获取离散色板配色
+ *
+ * <en/> Get discrete palette colors
+ * @param colorPalette - <zh/> 色板名或着颜色数组 | <en/> Palette name or color array
+ * @returns <zh/> 色板上具体颜色 | <en/> Specific color on the palette
+ */
+export function getPaletteColors(colorPalette?: string | CategoricalPalette): CategoricalPalette | undefined {
+  const palette = isString(colorPalette) ? getPlugin('palette', colorPalette) : colorPalette;
+  if (isFunction(palette)) return undefined;
+  return palette;
+}
diff --git a/packages/site/examples/item/defaultNodes/demo/circle.ts b/packages/site/examples/item/defaultNodes/demo/circle.ts
index 8ae1cb153e6..10541f3d76c 100644
--- a/packages/site/examples/item/defaultNodes/demo/circle.ts
+++ b/packages/site/examples/item/defaultNodes/demo/circle.ts
@@ -10,6 +10,7 @@ const data = {
     { id: 'circle-selected' },
     { id: 'circle-highlight' },
     { id: 'circle-inactive' },
+    { id: 'circle-disabled' },
   ],
 };
 
@@ -19,52 +20,28 @@ const graph = new Graph({
   node: {
     style: {
       type: 'circle', // 👈🏻 Node shape type.
-      width: 40,
-      height: 40,
-      fill: '#1783FF',
+      size: 40,
+      labelMaxWidth: 120,
       labelText: (d) => d.id,
+      iconHeight: 20,
+      iconWidth: 20,
       iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-      iconWidth: 30,
-      iconHeight: 30,
       halo: (d) => d.id.includes('halo'),
       ports: (d) =>
         d.id.includes('ports')
           ? [{ position: 'left' }, { position: 'right' }, { position: 'top' }, { position: 'bottom' }]
           : [],
-      portStroke: '#31d0c6',
-      portFill: '#fff',
-      portR: 2,
-      portLineWidth: 1,
       badges: (d) =>
         d.id.includes('badges')
           ? [
-              { text: 'A', position: 'right-top', backgroundFill: '#8291b2' },
-              { text: 'Important', position: 'right', backgroundFill: '#e66c5b' },
-              { text: 'Notice', position: 'right-bottom', backgroundFill: '#e5b95e' },
+              { text: 'A', position: 'right-top' },
+              { text: 'Important', position: 'right' },
+              { text: 'Notice', position: 'right-bottom' },
             ]
           : [],
-      badgeFill: '#fff',
       badgeFontSize: 8,
       badgePadding: [1, 4],
     },
-    state: {
-      active: {
-        halo: true,
-      },
-      selected: {
-        halo: true,
-        lineWidth: 2,
-        stroke: '#000',
-      },
-      highlight: {
-        halo: false,
-        lineWidth: 2,
-        stroke: '#000',
-      },
-      inactive: {
-        opacity: 0.2,
-      },
-    },
   },
   layout: {
     type: 'grid',
@@ -78,4 +55,5 @@ graph.on('afterrender', () => {
   graph.setElementState('circle-selected', 'selected');
   graph.setElementState('circle-highlight', 'highlight');
   graph.setElementState('circle-inactive', 'inactive');
+  graph.setElementState('circle-disabled', 'disabled');
 });
diff --git a/packages/site/examples/item/defaultNodes/demo/ellipse.ts b/packages/site/examples/item/defaultNodes/demo/ellipse.ts
index 6f4f7f17b5d..d657b6ca396 100644
--- a/packages/site/examples/item/defaultNodes/demo/ellipse.ts
+++ b/packages/site/examples/item/defaultNodes/demo/ellipse.ts
@@ -10,6 +10,7 @@ const data = {
     { id: 'ellipse-selected' },
     { id: 'ellipse-highlight' },
     { id: 'ellipse-inactive' },
+    { id: 'ellipse-disabled' },
   ],
 };
 
@@ -19,50 +20,28 @@ const graph = new Graph({
   node: {
     style: {
       type: 'ellipse', // 👈🏻 Node shape type.
-      width: 45,
-      height: 35,
-      fill: '#1783FF',
+      size: [45, 35],
+      labelMaxWidth: 120,
       labelText: (d) => d.id,
+      iconHeight: 20,
+      iconWidth: 20,
       iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
       halo: (d) => d.id.includes('halo'),
       ports: (d) =>
         d.id.includes('ports')
           ? [{ position: 'left' }, { position: 'right' }, { position: 'top' }, { position: 'bottom' }]
           : [],
-      portStroke: '#31d0c6',
-      portFill: '#fff',
-      portR: 2,
-      portLineWidth: 1,
       badges: (d) =>
         d.id.includes('badges')
           ? [
-              { text: 'A', position: 'right-top', backgroundFill: '#8291b2' },
-              { text: 'Important', position: 'right', backgroundFill: '#e66c5b' },
-              { text: 'Notice', position: 'right-bottom', backgroundFill: '#e5b95e' },
+              { text: 'A', position: 'right-top' },
+              { text: 'Important', position: 'right' },
+              { text: 'Notice', position: 'right-bottom' },
             ]
           : [],
-      badgeFill: '#fff',
       badgeFontSize: 8,
       badgePadding: [1, 4],
     },
-    state: {
-      active: {
-        halo: true,
-      },
-      selected: {
-        halo: true,
-        lineWidth: 2,
-        stroke: '#000',
-      },
-      highlight: {
-        halo: false,
-        lineWidth: 2,
-        stroke: '#000',
-      },
-      inactive: {
-        opacity: 0.2,
-      },
-    },
   },
   layout: {
     type: 'grid',
@@ -76,4 +55,5 @@ graph.on('afterrender', () => {
   graph.setElementState('ellipse-selected', 'selected');
   graph.setElementState('ellipse-highlight', 'highlight');
   graph.setElementState('ellipse-inactive', 'inactive');
+  graph.setElementState('ellipse-disabled', 'disabled');
 });
diff --git a/packages/site/examples/item/defaultNodes/demo/radiusRect.ts b/packages/site/examples/item/defaultNodes/demo/radiusRect.ts
index 708b376e76e..aba597457fd 100644
--- a/packages/site/examples/item/defaultNodes/demo/radiusRect.ts
+++ b/packages/site/examples/item/defaultNodes/demo/radiusRect.ts
@@ -10,6 +10,7 @@ const data = {
     { id: 'rect-selected' },
     { id: 'rect-highlight' },
     { id: 'rect-inactive' },
+    { id: 'rect-disabled' },
   ],
 };
 
@@ -20,52 +21,27 @@ const graph = new Graph({
     style: {
       type: 'rect', // 👈🏻 Node shape type.
       radius: 4, // 👈🏻 Set the radius.
-      width: 40,
-      height: 40,
-      fill: '#1783FF',
+      size: 40,
       labelText: (d) => d.id,
       iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-      iconWidth: 30,
-      iconHeight: 30,
+      iconWidth: 20,
+      iconHeight: 20,
       halo: (d) => d.id.includes('halo'),
       ports: (d) =>
         d.id.includes('ports')
           ? [{ position: 'left' }, { position: 'right' }, { position: 'top' }, { position: 'bottom' }]
           : [],
-      portStroke: '#31d0c6',
-      portFill: '#fff',
-      portR: 2,
-      portLineWidth: 1,
       badges: (d) =>
         d.id.includes('badges')
           ? [
-              { text: 'A', position: 'right-top', backgroundFill: '#8291b2' },
-              { text: 'Important', position: 'right', backgroundFill: '#e66c5b' },
-              { text: 'Notice', position: 'right-bottom', backgroundFill: '#e5b95e' },
+              { text: 'A', position: 'right-top' },
+              { text: 'Important', position: 'right' },
+              { text: 'Notice', position: 'right-bottom' },
             ]
           : [],
-      badgeFill: '#fff',
       badgeFontSize: 8,
       badgePadding: [1, 4],
     },
-    state: {
-      active: {
-        halo: true,
-      },
-      selected: {
-        halo: true,
-        lineWidth: 2,
-        stroke: '#000',
-      },
-      highlight: {
-        halo: false,
-        lineWidth: 2,
-        stroke: '#000',
-      },
-      inactive: {
-        opacity: 0.2,
-      },
-    },
   },
   layout: {
     type: 'grid',
@@ -79,4 +55,5 @@ graph.on('afterrender', () => {
   graph.setElementState('rect-selected', 'selected');
   graph.setElementState('rect-highlight', 'highlight');
   graph.setElementState('rect-inactive', 'inactive');
+  graph.setElementState('rect-disabled', 'disabled');
 });
diff --git a/packages/site/examples/item/defaultNodes/demo/rect.ts b/packages/site/examples/item/defaultNodes/demo/rect.ts
index 57088a5ba00..6bd6f5d6d83 100644
--- a/packages/site/examples/item/defaultNodes/demo/rect.ts
+++ b/packages/site/examples/item/defaultNodes/demo/rect.ts
@@ -10,6 +10,7 @@ const data = {
     { id: 'rect-selected' },
     { id: 'rect-highlight' },
     { id: 'rect-inactive' },
+    { id: 'rect-disabled' },
   ],
 };
 
@@ -19,52 +20,27 @@ const graph = new Graph({
   node: {
     style: {
       type: 'rect', // 👈🏻 Node shape type.
-      width: 40,
-      height: 40,
-      fill: '#1783FF',
+      size: 40,
       labelText: (d) => d.id,
       iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-      iconWidth: 30,
-      iconHeight: 30,
+      iconWidth: 20,
+      iconHeight: 20,
       halo: (d) => d.id.includes('halo'),
       ports: (d) =>
         d.id.includes('ports')
           ? [{ position: 'left' }, { position: 'right' }, { position: 'top' }, { position: 'bottom' }]
           : [],
-      portStroke: '#31d0c6',
-      portFill: '#fff',
-      portR: 2,
-      portLineWidth: 1,
       badges: (d) =>
         d.id.includes('badges')
           ? [
-              { text: 'A', position: 'right-top', backgroundFill: '#8291b2' },
-              { text: 'Important', position: 'right', backgroundFill: '#e66c5b' },
-              { text: 'Notice', position: 'right-bottom', backgroundFill: '#e5b95e' },
+              { text: 'A', position: 'right-top' },
+              { text: 'Important', position: 'right' },
+              { text: 'Notice', position: 'right-bottom' },
             ]
           : [],
-      badgeFill: '#fff',
       badgeFontSize: 8,
       badgePadding: [1, 4],
     },
-    state: {
-      active: {
-        halo: true,
-      },
-      selected: {
-        halo: true,
-        lineWidth: 2,
-        stroke: '#000',
-      },
-      highlight: {
-        halo: false,
-        lineWidth: 2,
-        stroke: '#000',
-      },
-      inactive: {
-        opacity: 0.2,
-      },
-    },
   },
   layout: {
     type: 'grid',
@@ -78,4 +54,5 @@ graph.on('afterrender', () => {
   graph.setElementState('rect-selected', 'selected');
   graph.setElementState('rect-highlight', 'highlight');
   graph.setElementState('rect-inactive', 'inactive');
+  graph.setElementState('rect-disabled', 'disabled');
 });
diff --git a/packages/site/examples/item/defaultNodes/demo/star.ts b/packages/site/examples/item/defaultNodes/demo/star.ts
index e6d586ad846..597d987b5cc 100644
--- a/packages/site/examples/item/defaultNodes/demo/star.ts
+++ b/packages/site/examples/item/defaultNodes/demo/star.ts
@@ -10,6 +10,7 @@ const data = {
     { id: 'star-selected' },
     { id: 'star-highlight' },
     { id: 'star-inactive' },
+    { id: 'star-disabled' },
   ],
 };
 
@@ -19,9 +20,7 @@ const graph = new Graph({
   node: {
     style: {
       type: 'star', // 👈🏻 Node shape type.
-      width: 40,
-      height: 40,
-      fill: '#1783FF',
+      size: 40,
       labelText: (d) => d.id,
       iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
       halo: (d) => d.id.includes('halo'),
@@ -29,40 +28,17 @@ const graph = new Graph({
         d.id.includes('ports')
           ? [{ position: 'left' }, { position: 'right' }, { position: 'top' }, { position: 'bottom' }]
           : [],
-      portStroke: '#31d0c6',
-      portFill: '#fff',
-      portR: 2,
-      portLineWidth: 1,
       badges: (d) =>
         d.id.includes('badges')
           ? [
-              { text: 'A', position: 'right-top', backgroundFill: '#8291b2' },
-              { text: 'Important', position: 'right', backgroundFill: '#e66c5b' },
-              { text: 'Notice', position: 'right-bottom', backgroundFill: '#e5b95e' },
+              { text: 'A', position: 'right-top' },
+              { text: 'Important', position: 'right' },
+              { text: 'Notice', position: 'right-bottom' },
             ]
           : [],
-      badgeFill: '#fff',
       badgeFontSize: 8,
       badgePadding: [1, 4],
     },
-    state: {
-      active: {
-        halo: true,
-      },
-      selected: {
-        halo: true,
-        lineWidth: 2,
-        stroke: '#000',
-      },
-      highlight: {
-        halo: false,
-        lineWidth: 2,
-        stroke: '#000',
-      },
-      inactive: {
-        opacity: 0.2,
-      },
-    },
   },
   layout: {
     type: 'grid',
@@ -76,4 +52,5 @@ graph.on('afterrender', () => {
   graph.setElementState('star-selected', 'selected');
   graph.setElementState('star-highlight', 'highlight');
   graph.setElementState('star-inactive', 'inactive');
+  graph.setElementState('star-disabled', 'disabled');
 });
diff --git a/packages/site/examples/item/defaultNodes/demo/triangle.ts b/packages/site/examples/item/defaultNodes/demo/triangle.ts
index 2006c233517..8bfca311d1c 100644
--- a/packages/site/examples/item/defaultNodes/demo/triangle.ts
+++ b/packages/site/examples/item/defaultNodes/demo/triangle.ts
@@ -10,6 +10,7 @@ const data = {
     { id: 'triangle-selected' },
     { id: 'triangle-highlight' },
     { id: 'triangle-inactive' },
+    { id: 'triangle-disabled' },
   ],
 };
 
@@ -19,48 +20,23 @@ const graph = new Graph({
   node: {
     style: {
       type: 'triangle', // 👈🏻 Node shape type.
-      width: 40,
-      height: 40,
+      size: 40,
       direction: (d) => d.data?.direction,
-      fill: '#1783FF',
       labelText: (d) => d.id,
       iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
       halo: (d) => d.id.includes('halo'),
       ports: (d) => (d.id.includes('ports') ? [{ position: 'left' }, { position: 'top' }, { position: 'bottom' }] : []),
-      portStroke: '#31d0c6',
-      portFill: '#fff',
-      portR: 2,
-      portLineWidth: 1,
       badges: (d) =>
         d.id.includes('badges')
           ? [
-              { text: 'A', position: 'right-top', backgroundFill: '#8291b2' },
-              { text: 'Important', position: 'right', backgroundFill: '#e66c5b' },
-              { text: 'Notice', position: 'right-bottom', backgroundFill: '#e5b95e' },
+              { text: 'A', position: 'right-top' },
+              { text: 'Important', position: 'right' },
+              { text: 'Notice', position: 'right-bottom' },
             ]
           : [],
-      badgeFill: '#fff',
       badgeFontSize: 8,
       badgePadding: [1, 4],
     },
-    state: {
-      active: {
-        halo: true,
-      },
-      selected: {
-        halo: true,
-        lineWidth: 2,
-        stroke: '#000',
-      },
-      highlight: {
-        halo: false,
-        lineWidth: 2,
-        stroke: '#000',
-      },
-      inactive: {
-        opacity: 0.2,
-      },
-    },
   },
   layout: {
     type: 'grid',
@@ -74,4 +50,5 @@ graph.on('afterrender', () => {
   graph.setElementState('triangle-selected', 'selected');
   graph.setElementState('triangle-highlight', 'highlight');
   graph.setElementState('triangle-inactive', 'inactive');
+  graph.setElementState('triangle-disabled', 'disabled');
 });